风动之石的博客

文字省略

单行省略

@mixin one-line-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
1
2
3
4
5
one-line-ellipsis(maxWidth = 100%)
    max-width maxWidth
    white-space nowrap
    text-overflow ellipsis
    overflow hidden
1
2
3
4
5
.one-line-ellipsis() {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
1
2
3
4
5

多行省略

.multi-line-ellipsis(@line) {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: @line;
    -webkit-box-orient: vertical;
}
1
2
3
4
5
6
7
8