如何使用text-overflow: ellipsis实现三行截断？

Question

如何在CSS中使用省略号来截断三行文本，而不是一行？

到目前为止，我只能实现单行文本的截断。我想让文本换行两次（用于引用）。

.truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

- alias51

---

可能是重复的问题：使用CSS，对于多行溢出的块，请使用“...” - Jukka K. Korpela

Answer 1

目前仅有 Webkit 浏览器支持此功能，CSS3 其他浏览器不支持。

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}

如果我需要截断文本，我会使用 clamp.js

- 2ne

---

实际上，现在所有主要浏览器都支持它 - https://css-tricks.com/almanac/properties/l/line-clamp/ - Gal Bracha