如何在换行的文本上使用CSS的text-overflow？

Question

19

有人知道如何在文字换行到第二行时使用{text-overflow: ellipsis;}的方法吗？

补充：

{whitespace: nowrap;}

使用text-overflow可以解决问题，但是我需要文本换行，所以无法使用它。

- Andrew Philpott

1

导致我的问题的不是将溢出设置为隐藏，而是必须使用“whitespace:nowrap”才能使“text-overflow”起作用。我需要省略号出现在第二行文本之后，但我不知道该如何实现。 - Andrew Philpott

1

请您选择一个答案，发布您得出的解决方案，或者说明给定的答案对您的情况不可行。谢谢！ - kroehre

2个回答

2

我相当确定在纯CSS解决方案中，你试图做的是不可能的。然而，有一种方法可以通过一些技巧来实现类似的效果。以下是我的做法：

在每个课程介绍的文本块上看到了渐变效果吗？首先，通过通常的方式限制溢出，然后在最后一行上方放置另一个div并在CSS中实现淡入淡出。除了淡入淡出之外，您还可以插入省略号或其他视觉提示。

因此，虽然没有按照您想要的方式解决问题，但实现了类似的UI效果，以确保用户知道内容被截断。个人认为这很漂亮 :-)

- Ari Maniatis

创意解决方案，不错！ - Jon Schneider

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jason Reed · Accepted Answer

如果你知道内容每次都会换到两行，这个解决方案将会起作用。使用::after和content: '...'; 然后将其定位在类型的右下角(它应该是一个块级元素)。只有在工作背景颜色为纯色时，这才能发挥作用，因为需要设置::after的背景与之匹配。

唯一的缺点是它只能适用于有限的参数，并且如果未对齐，则会将一个字符切成两半（这可能不会发生）。