水平和垂直之间的不同换行文本

Question

我面临一个非常明显的问题。 我认为已经有超过 1 000 000 人问过这个问题，但我没有成功在 Google 上找到我的答案：'(

我想将我的文字包裹在我的一张卡片中，这就是我现在得到的：

我的 CSS 目前是：

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

那么，我想要什么：

• 当文本中有换行符时，我的文本将换行：ok
• 我的文字出现垂直溢出时有3个省略号：ok
• 当出现水平溢出时，我的文本会排成一行：不正常（参见图片中的第 2 行）

我该怎么做？

Answer 1

我找到了使用 webkit-line-clamp 的方法，帮助自己阅读这份有用的报纸 here。

最终的 CSS 是：

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