终于完成了项目了，今天我就分享自己在项目中比较实用的一些功能的实现，第一个就是纯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控制显示几个字，超出就用省略表示。

版权声明：本文为mei1234原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/mei1234/p/8963132.html