使用CSS生成省略号和“更多内容”链接

Question

[更新]与这个问题的不同之处在于，它不仅要求文本被截断，还要求文本被截断。正如我所提到的，我已经使用这种方法将文本截断了。而是询问仅在文本被截断时才具有“阅读更多”链接（仅在可能的情况下使用CSS）。

目前，我正在使用这种方法在文本溢出时（当文本不能容纳在一行中时）生成省略号。但是，现在我还想在发生溢出时在行的末尾添加一个“阅读更多”链接，单击该链接将在多行中显示所有内容。这仅适用于CSS吗？

顺便说一句，我看到了这篇文章，无论文本是否溢出，它都会显示“更多”链接，这不是我想要的。

我猜想最后一种方法是将JavaScript与resize()侦听器一起使用，以动态隐藏文本的溢出部分并创建链接以显示它们。

谢谢！

Answer 1

如果您使用 CSS 类来截断文本，为什么不使用相同的类来隐藏或显示链接呢？

a.read-more {
display: none;
}

.truncate a.read-more {
display: block;
}

如果无论内容如何，​​都在所有项目上设置了该类，则需要使用 JavaScript 来完成此操作，如 Marcello 的评论中所述。