CSS 中的文字截断

单行文字的截断非常简单,但多行文字的截断就很麻烦了,
经常要配合 JavaScript 或者 其他语言进行字符串截断,然后拼接上 “…”

突然发现 line-clamp 它可以完成以纯 CSS 的多行文本截断,
并且配合 text-overflow: ellipsis 就可以在尾部加上省略号,
当然 overflow: hidden 并不可缺少

单行文字的截断

1
2
3
4
5
6
text-truncate {
word-wrap: normal;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

多行文字的截断

1
2
3
4
5
6
7
text-truncate {
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

CodePen 中查看 DEMO

Can I use 中查看 兼容性

在本地测试中,Chrome, Firefox 和 Edge 都是没问题的,就是不知道国产的那些奇葩有没有问题。

补充:

不同行数,修改 -webkit-line-clamp 即可
它仅与 display 设置为 -webkit-box-webkit-inline-box 的容器,
并且 -webkit-box-orient 属性为 vertical

Specifications:

CSS Overflow Module Level 3 ( Working Draft )

以上
2019-08-13