如何使div元素具有多行和文本溢出省略号(...)在div的最后一行的末尾

Question

我正在尝试一个div元素，当我在其中插入一个文本时，div元素的CSS样式可以将一个长文本分成多行，而且当它达到div高度时，最后一行的末尾会出现省略号(...)

我的div有一个以像素为单位的静态高度和宽度。我的问题是，我尝试过使用"overflow-wrap:break-word"，省略号不起作用，但是没有它，省略号可以工作，但是div只有一行，我想要多行，而不是一行。

<div style="overflow:hidden;white-space:no-wrap;text-overflow:ellipsis;overflow-wrap: break-word;height:50px;width:400px;"></div>

Answer 1

如果你的身高是静态的，使用下面的样式很容易。

<div style="overflow:hidden;width:400px;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;"></div>

"-webkit-line-clamp“将指定省略号将出现在指定行数之后。这将与webkit-box-orient: vertical；和display：-webkit-box;

的组合一起工作