文本超出使用省略号

话不多说，直接上代码

.overstep {
    
    
  /*  单行文本*/
  /*超出部分不可见外能不能添加...，固定三项*/
  overflow: hidden;
  /*超出部分不可见*/
  text-overflow: ellipsis;
  /*隐藏部分的文字用...，但是这个想要实现，还*/
  white-space: nowrap;
  /*还 设置宽度为非自动，即设置空格不换行*/


  /* 多行文本 */
  /* 溢出隐藏 */
  overflow : hidden;
  /* 多出的文本用 ... 显示 */
  text-overflow: ellipsis;
  /*  必须结合的属性 ，将对象作为弹性伸缩盒子模型显示  */
  display: -webkit-box;
  /* 需要显示的行数 */
  -webkit-line-clamp: 2;
  /* 设置伸缩盒对象的子元素从上到下纵向排列  */
  -webkit-box-orient: vertical;
}

sass用法

// 单行溢出省略号
@mixin row-one {
    
    
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行溢出省略号
@mixin multi-row($line) {
    
    
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
}

.overstep1 {
    
    
  width: 100px;
  @include row-one;
}

.overstep2 {
    
    
  width: 100px;
  @include multi-row(2);
}