利用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 */
}
如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!
如无特殊声明,文章均为原创,若有不正之处,万望告知。转载请附上原文地址,十分感谢!