素材牛VIP会员

CSS多行截断字符并补充省略号

CSS想实现截断字符(保留一定数量的文本),在以前多数是用

overflow:hidden; 
white-space:nowrap;
text-overflow:ellipsis; 
然后配合一个容器高度和宽度就结束了,但这种截断只能实现单行的截断。

如果想实现多行文本截断,则需要用下面代码

overflow:hidden; 
display: -webkit-box; /*改变容器模式*/
-webkit-line-clamp: 2;/*想保留多少行文本*/
-webkit-box-orient: vertical; /*咱们理解的行是水平的,但计算机TMD不知道,要告诉他,我说的行是垂直方向从上到下的*/

然后也要配合overflow:hidden,这个不要忘记,行了,以上。

对了不要忘了,上面说的,需要webkit内核浏览器才支持,但目前移动端浏览器大多数都支持这个属性,可能CSS标准再更新,就会取消前缀的写法了,但目前还是需要的。

2023年03月16日 综合评分:2 西瓦的守护