段落溢出省略号

Question

所以我有一个标题和内容固定高度的单元格（如下所示）。

当屏幕尺寸变小时，标题会显示text-overflow:ellipsis;。

以下是我用于标题和内容的标记：

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;    

然而，对于内容部分（简单div），内容扩展到容器之外（图中未显示）。另外因为内容通常有一个段落，当我应用与上面相同的css标记时，它只是在没有break的长行中超出容器。

我想要实现的是图像中的最后一部分（红色圆圈）。

所以，我已经设置了外部单元格max-height。我怎样才能使内容保持在单元格max-height内，并且溢出到下一行并且应用text-overflow: ellipsis;而不是长直线？

谢谢你们。

Answer 1

试试这个：

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