前言
如下图,PM让我们实现在有多个标签时,如果一行展示不下,就自动截断。做ios
和android
的同学给出的思路都是动态计算标签的长度,超出的直接截断。
H5
虽然也可以通过计算的方式去做,但想来还是觉得太麻烦。css
的overflow: hidden;
虽然可以让超出的地方隐藏掉,但是却没办法让多出来的标签消失。思前想后,发现万能的css
果然可以解决这个问题。
思路:
- 使用
flex
布局 - 允许换行
flex-wrap: wrap;
- 让超出的区域隐藏
overflow: hidden;
- 限定显示区域的高度为
标签的高度
这样,因为超出的标签自动换行
了,且容器的高度
只有一行标签的高度
,换行后的标签就不会展示出来了,从而实现了类似截断的效果。
具体代码如下:
display: flex;
flex-wrap: wrap;
overflow: hidden;
height: x px;