有人知道在文本包装上使用CSS文本溢出的方法吗？

Question

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

添加{whitespace:nowrap;}使文本溢出工作,但我需要包装文本,所以我真的不能使用它.

Answer 1

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

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

因此，不完全按照您想要的方式解决它，而是实现类似的 UI 结果以确保用户意识到内容被截断。个人觉得还是蛮漂亮的:-)