生成省略号和“阅读更多内容"与CSS链接 [英] Generating ellipsis AND "Read more" link with CSS

问题描述

[更新]与这个问题不同，因为它不仅要求文本被截断，还要求文本被截断.正如我提到的，我已经使用此方法.而是在询问仅在文本被截断时才具有阅读更多"链接(仅在可能的情况下使用CSS).

[Update] It's different from this question because it's not only asking for text truncation; as i mentioned, i already have text truncation using this approach. Rather it's asking about having "read more" link only when text is truncated (using CSS only if possible).

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

Currently i'm using this approach to generate ellipsis when text overflows (when it cannot fit into one line). However, now i also want to include a 'Read More' link at the end of the line when overflow occurs and clicking that link will display all the content over multiple lines. Is this doable with CSS only?

顺便说一句，我看到了这篇文章，其中显示了更多"链接无论文本是否溢出，这都不是我想要的.

btw, i saw this post, which displays "more" link no matter text has overflown or not, which is not what i want.

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

I guess the last resort would be using javascript with a resize() listener that dynamically hides the overflown portion of the text and creates the link to show them.

谢谢！

推荐答案

为此，您将需要JS.您可以在jQuery中执行以下操作:

You will need JS for this. You can do something like this in jQuery:

var str = "this is some truncated te..."; //Your string to eval
var n = str.search("..."); //look for the elepsis 
if (n ==="" || n === null){ //if the elepsis is not found in the string
   $(".foo").hide(); //hide your read more link
}else{
   $(".foo").show(); //show your read more link
}

注意:这回答了问题的第二部分-另一部分海报回答了第一部分.

Note: this answers the second part of your question - the first part was answered by another poster.

这篇关于生成省略号和“阅读更多内容"与CSS链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！