CSS文本裁剪

对于单行文本裁剪：

span {
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    display:block;
}

对于多行文本裁剪：

1. 在文本容器上定义 CSS Flexbox 属性 display: -webkit-box;

2. 定义要显示的文本行数 -webkit-line-clamp: 4;

3. 添加 -webkit-box-orient: vertical;

4. 使用 overflow: hidden; 属性

p {   
   display: -webkit-box;   
   -webkit-line-clamp: 4;   
   -webkit-box-orient: vertical;     
   overflow: hidden; 
}

在使用时有两种方法：

方法一：

// HTML 部分
<span v-if="text.length <= 1" class="single-line-text">
  {{ text }}
</span>

<p v-else class="multi-line-text">
  {{ text }}
</p>


/** CSS 部分 **/
.single-line-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}

.multi-line-text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

方法二：

两者可以结合使用，在只有单行文本时，使用方法一；在多行文本时，使用方法二。条件判断就是通过传的参数大小：

/** 这里的 linesNum 就是我文本的行数 **/
@mixin trim($linesNum: null){
   @if $linesNum!== null {
      display: -webkit-box;
      -webkit-line-clamp: $linesNum;
      -webkit-box-orient: vertical; 
      overflow: hidden;
   }
   @else{
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      display: block;
   }
}

在调用时，进行传参：

p {
  // 调用 mixin，并传递参数---行数4
  @include trim(4);
}

span {
  // 调用 mixin，不传递参数
  @include trim();
}