CSS 中的文字截断

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

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

单行文字的截断

text-truncate {
  word-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

多行文字的截断

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