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控制显示几个字，超出就用省略表示。