css文本超出省略号

终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号

/* 文本单行超出省略号 */
.textels {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //将元素设为盒子伸缩模型显示
-webkit-box-orient: vertical; //伸缩方向设为垂直方向
-webkit-line-clamp: 1; //超出3行隐藏,并显示省略号
}

/* 文本2行超出省略号 */
.textels-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //将元素设为盒子伸缩模型显示
-webkit-box-orient: vertical; //伸缩方向设为垂直方向
-webkit-line-clamp: 2; //超出3行隐藏,并显示省略号
}

/* 文本3行超出省略号 */
.textels-3 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //将元素设为盒子伸缩模型显示
-webkit-box-orient: vertical; //伸缩方向设为垂直方向
-webkit-line-clamp: 3; //超出3行隐藏,并显示省略号
}
想显示多少行超出的用省略号表示就更改-webkit-line-clamp为几。
已经用了n次了,肯定可以的,所以就不上图了哈!
下一篇就说说怎么用js控制显示几个字,超出就用省略表示。

猜你喜欢

转载自www.cnblogs.com/mei1234/p/8963132.html