css - 如何在环绕的文本上使用 CSS 文本溢出？

Question

有没有人知道在包裹到第二行的一段文本上使用 {text-overflow: ellipsis;} 的方法？

添加：

{whitespace: nowrap;}

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

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

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

2 回答 2