您现在的位置：首页 >> 前端 >> 内容

css---前端如何用css代码写省略号，单行省略号，多行省略号？

时间：2017/6/12 9:23:53 点击：

　　核心提示：css---前端如何用css代码写省略号，单行省略号，多行省略号？1、单行省略号width:100px;overflow: hidden;text-overflow: ellipsis;white-s...

css---前端如何用css代码写省略号，单行省略号，多行省略号？
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;
}