多个不确定宽度的子元素排列，超过父级宽度需折叠，这种 css 如何写？

Question

这种元素自适应的宽度，超过包裹的元素的宽度就自动折叠
就只显示第一排的内容，后面都折叠起来，
并且最后一个元素为显示 折叠图标
感觉一个个查询子元素的宽度在计算好麻烦啊，
有什么简单的一点的方法

Answer 1

感觉和下面这个很类似，看看有没有能借鉴的

CSS 实现多行文本“展开收起”
https://segmentfault.com/a/1190000040030723

Answer 2

简单的实现元素自适应宽度，超过则折行的需求实现起来会很容易。使用 flex 布局就可以实现。
比较困难的是 最后一个元素为折叠图标。

单纯用CSS实现了一下类似的效果。但是如果要保持 展开按钮为最后一个就很麻烦了，还是需要用JS去判断是否已经满足首行宽度。

CodePen Demo