Question

是否有人知道如何在包裹到第二行的文本上使用{text-overflow：ellipsis;}？

添加：

{whitespace: nowrap;}

使text-overflow有效，但我需要包装文本，所以我真的不能使用它。

Answer 1

如果您知道每次此解决方案工作时内容将包装为两行。使用::after和内容：'...';然后将它放在类型的右下角（应该是块级元素）。只有在您需要设置::after的背景以匹配时，才能使用纯色背景颜色。

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

Answer 2

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

请参阅介绍每门课程的文本块的淡入淡出？这是通过首先以通常的方式限制溢出然后在最后一行的顶部放置另一个div并在CSS中实现淡入淡出来完成的。您也可以插入省略号或其他视觉线索而不是淡入淡出。

所以，并不是按照你想要的方式解决它，而是实现类似的UI结果，以确保用户意识到内容被截断。就个人而言，我觉得它非常漂亮： - ）