1、单行省略号
width:100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
可以在scss中把width变为变量:
@mixin overflow($width){
width:$width;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
2、多行省略号
width:100px;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
//代码设置了宽度100px的文本,超过四行省略号显示
可以设置宽度和行数变量的scss函数:
@mixin white($width:auto,$row:1){
width:$width;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: $row;
-webkit-box-orient: vertical;
}