省略号

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;
}

你可能感兴趣的:(省略号)