html - 两行文本溢出省略号

Question

我知道您可以结合使用 CSS 规则使文本在溢出(超出父边界)时以省略号 (...) 结尾。

是否有可能(随便说，不)达到同样的效果，但让文本换行不止一行？

Here's a demo .

div {
  width: 300px; 
  height: 42px; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

如您所见，当文本比 div 的宽度宽时，文本以省略号结尾。但是，仍然有足够的空间让文本在第二行换行并继续。这被 white-space: nowrap 打断，这是省略号工作所必需的。

有什么想法吗？

P.S.:没有 JS 解决方案，尽可能使用纯 CSS。

Answer 1

简单的 CSS 属性可以解决问题。以下是三行省略号。

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;