带有省略号的段落溢出

Question

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

当屏幕变小时，标题变为text-overflow:ellipsis;。

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

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

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

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

所以，我已经有了外部单元格max-heightset。我怎样才能使内容保持在单元格 max-height 内，而任何溢出的内容都将转到下一行并应用 text-overflow: ellipsis; 而不是一条长直线？

谢谢大家。

Answer 1

试试这个：

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