在平时做项目中,经常会碰到这样的需求,文本最多显示几行,其余用省略号...代替
下面的less代码即可实现
.t-ellipsis(@lines){
overflow:hidden;
text-overflow: ellipsis;
display: box;
display: -webkit-box;
-webkit-line-clamp: @lines;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
}
对应的css代码为
.detail-text{
overflow: hidden;
text-overflow: ellipsis;
display: box;
display: -webkit-box;
-webkit-line-clamp: 3;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
}
在使用时,直接掉该函数,传入显示的行数即可
例如:让有detail-text类的元素显示3行
.detail-text{
.t-ellipsis(3);
}
注意:
-webkit-box-orient: vertical;这行样式上下需要加上上文中的注释,否则用webpack后-webkit-box-orient样式会丢失