默认显示两行文字,多余的文字省略掉,变成省略号
display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;
1.display:-webkit-box:这个属性的意思是将元素的显示模式设置为Webkit内核特有的弹性盒模型(-webkit-box是旧版弹性盒语法,现代浏览器已支持标准display:flex,但这里为了兼容多行截断逻辑保留)。
目的是配合-webkit-box-orient和-webkit-line-clamp,让文本按照盒模型的垂直方向排列,为多行截断做基础布局准备。
2.-webkit-line-clamp:2:这个作用是限制元素内文本显示的最大行数,这里值为2表示最多显示2行文本,超出部分会被隐藏并替换为省略号。
3.-webkit-box-orient:vertical:作用是设置-webkit-box弹性盒模型的子元素(这里主要是文本行)排列方向为垂直方向,让文本能按行堆叠,这样-webkit-line-clamp才能准确计算并截断行数。
4.overflow:hidden;作用是隐藏超出元素容器范围的内容,因为前面限制了文本最多显示2行,超出的文本物理上还在容器内,通过overflow:hidden把超出部分裁剪掉,视觉上就看不到了。
5.text-overflow:ellipsis;作用当文本发生溢出时,在溢出内容的末尾显示省略号