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