单行超出
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行超出
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* 超出2行显示 */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/* 强制英文单词换行 */
word-break: break-all;
scss封装成mixin,方便使用
@mixin ellipsis($ellipsis: 1) {
@if $ellipsis == 1 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} @else {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $ellipsis;
-webkit-box-orient: vertical;
word-break: break-all; /* 强制英文单词换行 */
}
}
// 调用
@include ellipsis; // 单行
@include ellipsis(2); // 多行