单行文本省略号
.ellipsis-row1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
多行文本省略号
.ellipsis-row3 {
overflow: hidden;
display: -webkit-box;
text-overflow: -o-ellipsis-lastline;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
Sass合并
@for $lineCount from 1 through 3 {
%ellipsis-row#{$lineCount} {
overflow: hidden;
@if $lineCount == 1 {
white-space: nowrap;
text-overflow: ellipsis;
} @else {
display: -webkit-box;
text-overflow: -o-ellipsis-lastline;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lineCount;
}
}
}
.section1 p {
@extend %ellipsis-row1;
}
.section2 p {
@extend %ellipsis-row2;
}
.section3 p {
@extend %ellipsis-row3;
}
编译后：
.section1 p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.section2 p {
overflow: hidden;
display: -webkit-box;
text-overflow: -o-ellipsis-lastline;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.section3 p {
overflow: hidden;
display: -webkit-box;
text-overflow: -o-ellipsis-lastline;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
