利用css3的line-clamp属性可以设置超出指定行数显示省略号。
.line-camp( @clamp: 3 ) {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: @clamp;
-webkit-box-orient: vertical;
}
但是，在使用webpack打包的时候，-webkit-box-orient: vertical会被删除掉，主要是因为optimize-css-assets-webpack-plugin插件的问题。
可以使用如下办法来以防删除。
.line-camp( @clamp: 3 ) {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: @clamp;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
}
如果觉得我的文章对您有用，请您随意打赏。您的支持将鼓励我更加努力创作！
如无特殊声明，文章均为原创，若有不正之处，万望告知。转载请附上原文地址，十分感谢！
说点什么