全局mixin封装文本溢出隐藏显示省略号
@mixin ellipsis2($line) {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
}
@mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
在全局组件中引入该样式文件,然后在页面中可直接用:
@include ellipsis2(2); // 超过两行溢出隐藏