如何隐藏/显示特定长度内的更多文本(例如youtube) [英] How to hide/show more text within a certain length (like youtube)

问题描述

我希望文本仅包含一定数量的字符/长度，在该长度之后，我想添加一个链接以显示文本的完整长度.

I want to have a text to only be a certain amount of characters/length and after that length, I want to put a link to reveal the full length of the text.

链接将为(more...).一旦用户单击链接(more..)，其余文本将向下滑动.

The link will be (more...). And once the user clicks the link (more..) the rest of the text will slide down.

我该怎么做?

这里有个例子.

blah blah blah blah blah (more...)

当用户单击(more..)时，它将显示整个文本.

When the user clicks (more..), it will show the entire text.

注意:我要在表行/表单元格中获取一个about数据，而不仅仅是文本.

推荐答案

有关此效果的秘诀是使用HTML标签包装要控制的部分.

The secret about this effect, is wrapping the parts that you want to control with HTML tags.

$(".more").toggle(function(){
    $(this).text("less..").siblings(".complete").show();    
}, function(){
    $(this).text("more..").siblings(".complete").hide();    
});

---

<span class="teaser">text goes here</span>

<span class="complete"> this is the 
complete text being shown</span>

<span class="more">more...</span>

此处的在线演示: http://jsfiddle.net/zA23k/215/

这篇关于如何隐藏/显示特定长度内的更多文本(例如youtube)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！