如何在环绕的文本上使用 CSS 文本溢出？答案

【问题标题】：How to use CSS text-overflow on text that's wrapping?如何在环绕的文本上使用 CSS 文本溢出？
【发布时间】：2011-01-24 07:24:06
【问题描述】：

有没有人知道在一段文本中使用 {text-overflow: ellipsis;} 的方法？

添加：

{whitespace: nowrap;}

使text-overflow 工作，但我需要换行，所以我真的不能使用它。

【问题讨论】：

导致我的问题的原因不是将溢出设置为隐藏，而是 whitespace:nowrap 似乎是使文本溢出正常工作所必需的。我需要省略号出现在第二行文本之后，我不知道该怎么做。
请选择一个答案，发布您得出的解决方案，或者指出给定的答案不适用于您的案例。谢谢！

【解决方案1】：

如果您知道每次该解决方案有效时内容将换行为两行。使用::after 和内容：'...'；然后将其放置在类型的右下角（应该是块级元素）。这仅在您使用纯色背景颜色时才有效，因为您需要将::after 的背景设置为匹配。

唯一的缺点是它可以成功的参数有限，而且如果事情没有正确排列（他们可能不会），它会将一个角色切成两半。

【讨论】：

【解决方案2】：

我相当肯定，在纯 CSS 解决方案中，您尝试做的事情是不可能的。但是，有一种方法可以将类似的结果组合在一起。这是我所做的：

看到介绍每门课程的文字块上的渐变了吗？这是通过首先以通常的方式限制溢出，然后在最后一行的顶部放置另一个 div 并在 CSS 中实现淡入淡出来完成的。除了淡入淡出，您还可以插入省略号或其他视觉线索。

因此，不是完全按照您想要的方式解决它，而是实现类似的 UI 结果以确保用户知道内容被截断。个人觉得挺好看的:-)

【讨论】：