Javascript 具有动态宽度的动态元素数，直至填充两行

我在页面底部显示多个相邻的div元素

这些元素的数量和宽度是未知的——这意味着我事先不知道它们，因为它们是根据其他一些规则动态加载的

我想要实现的是，只显示这些元素的两行，一旦另一个元素在第三行中断，只需显示一些指示器，表明有更多的元素可以扩展

我不想有任何滚动条那里

我正在使用jquery和knockout.js

当屏幕大小更改时，应重新组织元素

JS

HTML

---

我不知道如何计算或找出应该分配给

标记的元素查看
可见。有什么建议吗？我不认为这只能通过css来实现
只需使用for布局就可以实现一半

显示溢出指示器是一个计算有多少行的问题，也就是说在项目中有多少不同的top值

除了在
afterRender
中使用
setMoreTags
外，还需要将其设置为在调整容器大小时运行


const name=['1'，'2'，'3'，'4'，'5个金环'，'6'，'7'，'8'，'9'，'10'，'，
“十一”、“十二”、“十三”、“十四”、“十五”
];
常数vm={
//表示div的所有元素
标签：ko.observearray（[]），
moretag:ko.可观察（假），
setMoreTags:函数（）{
//计算标签中有多少不同的顶部
//如果超过两个，则MoreTag为真
const tags=document.queryselectoral（'#tagscocontainer.tag'）；
常数tops={}；
for（标签常数）{
tops[t.getBoundingClientRect（）.top]=true；
}
vm.moretag（Object.keys（top.length>2）；
}
};
ko.应用绑定（vm）；
常数i=设置间隔（（）=>{
如果（名称.长度）{
vm.tags.push({
标题：names.shift（）
});
}否则{
间隔时间（i）；
}
}, 500);
#标记容器{
背景色：#eee；
显示器：flex；
柔性流：行换行；
最大高度：68px；
溢出：隐藏；
位置：相对位置；
宽度：300px；
}
#tagsContainer.tag{
边框：淡蓝色；
框大小：边框框；
高度：30px；
利润上限：4倍；
右边距：1px；
填充物：5px；
}
#标记容器。更多指示器{
背景色：红色；
颜色：白色；
字号：18px；
位置：绝对位置；
底部：0；
右：0；
填充物：5px；
}

...
谢谢！这是一个很棒的解决方案。我花了一段时间才弄明白它为什么有效，尤其是我必须学习flexbox布局，但我喜欢它！
// all the elements representing the divs
self.tags = ko.observableArray();
// disaplayed elements
self.tagsPreview = ko.observableArray()

<div id="tagsContainer">
    <!-- ko foreach: { data: tagsPreview, as: 'tag' } -->
        <div data-bind="text: tag.title" class="tag"></div>            
    <!-- /ko -->
</div>

#tagsContainer .tag {
    box-sizing: border-box;
    display: inline-block;     
    height: 30px;    
    margin-top: 4px;
    margin-right: 1px;
    padding: 5px;        
}