CSS 实现元素较宽不能被完全展示时将其隐藏

乍一看，这个问题很简单。基于样式问题，尽量不要用js来解决原则上我写了下面一堆样式，达到了完美的效果。可以看到最后两个.labels会因为超出.labels的宽度而被折叠到下一行，然后被.labels的overflow:hidden隐藏。.label{显示：块；高度：24px；行高：24px；填充：010px；背景色：#e1ecf4；边界半径：12px；字体大小：14px；伸缩收缩：0；//label不收缩，长度为内容长度&+.label{margin-left:5px;}}.labels{高度：24px；//一行标签的高度overflow:hidden;显示：弹性；弹性包装：包装；justify-content:flex-start;}但是高兴没多久，突然发现了问题。如果第一个标签的长度超过了容器的宽度，它不会被完全隐藏，但内容会被截断。这个问题如下困扰了我一段时间，一直想知道css中有什么属性可以在子元素的宽度超过父容器时隐藏整个子元素（而不是只隐藏超出父容器的部分）。各种想都没有结果，快要放弃了。在纠结要不要用js实现的时候，突然冒出一个念头==既然折叠的元素现在可以隐藏了，那么让第一个label也折叠起来就可以了。嗯==。那么如何让第一个label折叠起来呢，想了一个比较tricky的方法，让它不再是第一个元素，利用flex的特性进行折叠~所以，在所有.label元素之前，添加一个.placeholder元素，只有1px宽和100%高。查看元素，可以看到.placeholder元素占据了第一行的位置，达到了我们想要的效果~其实利用这个思路，使用float也可以达到同样的效果。虽然有点坑，多了一个DOM元素，但是效果还是很完美的~附上codepen链接，供参考https://codepen.io/Simona_Den...