单行文本文字超出隐藏并显示省略号:
.box {
white-space: nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
多行文本(展示2行)文字超出隐藏并显示省略号:
.box {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
如果使用SCSS 或Less
/**
CSS省略号-- 默认一行,可根据传递的参数设置展示几行
参数: {Param} Number
用例--超出两行使用省略号: @include ellipsis(2);
*/
@mixin ellipsis($lineClamp: 1) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $lineClamp;
line-clamp: $lineClamp;
-webkit-box-orient: vertical;
}