css文本超过多行之后显示省略号(图文教程)

发布时间:2020-05-09 17:54:08 浏览量:0 来源:谷歌测速网

在做前端列表时,标题过长影响排版,想实现标题二行或三行后显示省略号,实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,多行省略号就要用到-webkit-line-clamp属性。


overflow:hidden; 
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:2; 
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)
-webkit-line-clamp:2; //这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。

没有省略号,影响统一排版:

image.png

看效果

image.png