前言

如下图，PM让我们实现在有多个标签时，如果一行展示不下，就自动截断。做ios和android的同学给出的思路都是动态计算标签的长度，超出的直接截断。

H5虽然也可以通过计算的方式去做，但想来还是觉得太麻烦。css的overflow: hidden;虽然可以让超出的地方隐藏掉，但是却没办法让多出来的标签消失。思前想后，发现万能的css果然可以解决这个问题。

思路：

1. 使用flex布局
2. 允许换行flex-wrap: wrap;
3. 让超出的区域隐藏 overflow: hidden;
4. 限定显示区域的高度为标签的高度

这样，因为超出的标签自动换行了，且容器的高度只有一行标签的高度，换行后的标签就不会展示出来了，从而实现了类似截断的效果。

具体代码如下：

display: flex;
flex-wrap: wrap;
overflow: hidden;
height: x px;