【发布时间】：2013-04-17 11:11:42
【问题描述】：
我正在尝试在段落末尾添加一个链接以阅读更多文本。我希望这个链接在最后的段落中显示，如下所示：
我希望段落附有 ... 和阅读更多链接。
现在我不希望阅读更多链接做任何事情，因为一旦我获得链接，我将添加我自己的功能。我只是在努力寻找一种方法让链接看起来像这样。
我一直在查看以下 jquery 脚本，但这似乎适用于字符数，并在任何字符限制处剪切最后一个单词，然后不显示我想要的方式（链接出现在下面这段落）。它还已经包含了单击链接时发生的情况的功能，由于我缺乏 jquery 的能力，我一直未能成功编辑。
$(function(){ /* to make sure the script runs after page load */
$('.customer_experience').each(function(event){ /* select all divs with the customer_experience class */
var max_length = 250; /* set the max content length before a read more link will be added */
if($(this).html().length > max_length){ /* check for content length */
var short_content = $(this).html().substr(0,max_length); /* split the content in two parts */
var long_content = $(this).html().substr(max_length);
$(this).html(short_content+
'<a href="#" class="read_more"><br/>read more...</a>'+
'<span class="more_text" style="display:none;">'+long_content+'</span>'); /* Alter the html to allow the read more functionality */
$(this).find('a.read_more').click(function(event){ /* find the a.read_more element within the new html and bind the following code to it */
event.preventDefault(); /* prevent the a from changing the url */
$(this).parents('.customer_experience').find('.more_text').show(); /* show the .more_text span */
});
}
});
});
我是否需要使用 jQuery 来获得我正在寻找的结果？这可以单独使用 CSS 完成吗？我根本不会写 jQuery，所以我有点迷茫。
任何关于我可以去哪里的帮助或提示将不胜感激。
已编辑以添加 HTML 标记
<div class='comments_container'>
<img src='images/comment-icon.png'/>
<h1 class='comments_title'>Customer experience</h1>
<p class='customer_experience'>$customer_exp_one</p>
</div>
有问题的段落是.customer_experience。
【问题讨论】：
-
你能分享你的html标记吗？
-
@AlexLynham 是的。但是，它是由php驱动的。
-
您希望链接在达到字符数之前、在达到字数之后还是在内容超过指定宽度/高度的块之后出现在最后一个单词之后？
-
您要减少段落还是字数？
-
@DerekHenderson 理想情况下它会超过包含 div 的高度。