Javascript 截断段落的前 100 个字符并隐藏段落的其余内容以显示/隐藏带有更多/更少链接的其余内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11417544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Truncate paragraph first 100 character and hide rest content of paragraph to show/hide rest contenct with more/less link
提问by Raj Mehta
I have paragraph which has more than 500 character. I want to get only initial 100 character and hide rest of it. Also I want to insert "More" link next to 100 character. On click of more link whole paragraph should display and edit text "More" to "Less" and on click "Less" it should toggle behavior. Paragraph is dynamically generated I cant wrap content of it using .wrap(). Here is example what I have and what I want.
我有超过 500 个字符的段落。我只想获得最初的 100 个字符并隐藏其余的字符。我还想在 100 个字符旁边插入“更多”链接。单击更多链接时，整个段落应显示并将文本“更多”编辑为“更少”，单击“更少”时，它应切换行为。段落是动态生成的，我无法使用 .wrap() 包装它的内容。这是我所拥有的和我想要的示例。
This is what I have :
这就是我所拥有的：
<p>It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is that
it has a more-or-less normal distribution of letters, as opposed to using 'Content
content here', making it look like readable English. Many desktop publishing packages
and web page editors now use Lorem Ipsum as their default model text.</p>
This is what I want when DOM loads
这就是我在 DOM 加载时想要的
<p>It is a long established fact that a reader will be distracted by ..More</p>
This is what I want when user click "More"
当用户单击“更多”时，这就是我想要的
<p>It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is that
it has a more-or-less normal distribution of letters, as opposed to using 'Content
content here', making it look like readable English. Many desktop publishing packages
and web page editors now use Lorem Ipsum as their default model text. ..Less</p>
When we click on "Less", it should revert what on click "More" has done.
当我们点击“Less”时，它应该恢复点击“More”时所做的。
I am using jQuery to split, slice and wrap substring into span which I want to hide but that doesn't work.
我正在使用 jQuery 将子字符串拆分、切片和包装到我想隐藏的跨度中，但这不起作用。
var title = $("p").text();
var shortText = jQuery.trim(title).substring(100, 1000).split(" ")
.slice(0, -1).join(" ") + "...More >>";
shortText.wrap('</span>');
回答by iambriansreed
Fiddle: http://jsfiddle.net/iambriansreed/bjdSF/
小提琴：http: //jsfiddle.net/iambriansreed/bjdSF/
jQuery:
jQuery：
jQuery(function(){
var minimized_elements = $('p.minimize');
var minimize_character_count = 100;
minimized_elements.each(function(){
var t = $(this).text();
if(t.length < minimize_character_count ) return;
$(this).html(
t.slice(0,minimize_character_count )+'<span>... </span><a href="#" class="more">More</a>'+
'<span style="display:none;">'+ t.slice(minimize_character_count ,t.length)+' <a href="#" class="less">Less</a></span>'
);
});
$('a.more', minimized_elements).click(function(event){
event.preventDefault();
$(this).hide().prev().hide();
$(this).next().show();
});
$('a.less', minimized_elements).click(function(event){
event.preventDefault();
$(this).parent().hide().prev().show().prev().show();
});
});?
回答by Zach M.
It's not a top google result, but I've used the jQuery Expander pluginto great success. It's nice because it doesn't hide anything from search engine robots.
这不是谷歌的顶级结果，但我使用jQuery Expander 插件取得了巨大成功。这很好，因为它不会对搜索引擎机器人隐藏任何东西。
回答by Noam Manos
Thanks to @iambriansreed for his nice function, here's a slight modification to truncate paragraph on line breakes:
感谢@iambriansreed 的出色功能，这里有一个轻微的修改来在换行符上截断段落：
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
jQuery(function(){
var minimized_elements = $('p.minimize');
var maxLines = 20;
minimized_elements.each(function(){
// var textArr = $(this).text().split(/\n/); // Not supported in IE < 9
var textArr = $(this).html().replace(/\n?<br>/gi,"<br>").split(/<br>/);
var countLines = textArr.length;
if (countLines > maxLines) {
text_less = textArr.slice(0, maxLines).join("<br>");
text_more = textArr.slice(maxLines, countLines).join("<br>");
}
else return;
$(this).html(
text_less + '<span>... </span><a href="#" class="more">More</a>'+
'<span style="display:none;">'+ text_more +' <a href="#" class="less">Less</a></span>'
);
});
$('a.more', minimized_elements).click(function(event){
event.preventDefault();
$(this).hide().prev().hide();
$(this).next().show();
});
$('a.less', minimized_elements).click(function(event){
event.preventDefault();
$(this).parent().hide().prev().show().prev().show();
});
});
</script>
回答by Brandon
Have you looked at the jQuery Truncatorplugin?
你看过jQuery Truncator插件吗？
It pretty much does exactly what you've described.
它几乎完全符合您的描述。
回答by illTyped
It looks like a couple other people beat me to it, but here is what I came up with.
看起来其他几个人打败了我，但这就是我想出的。
var MORE = "... More...",
LESS = " Less...";
$(function(){
$("p").each(function(){
var $ths = $(this),
txt = $ths.text();
//Clear the text
$ths.text("");
//First 100 chars
$ths.append($("<span>").text(txt.substr(0,100)));
//The rest
$ths.append($("<span>").text(txt.substr(100, txt.length)).hide());
//More link
$ths.append(
$("<a>").text(MORE).click(function(){
var $ths = $(this);
if($ths.text() == MORE){
$ths.prev().show();
$ths.text(LESS);
}
else{
$ths.prev().hide();
$ths.text(MORE);
}
})
);
});
});
回答by Kundan Singh
for everyone who has come here searching for show more... Here is another plug-in http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/
对于来这里搜索更多节目的每个人...这是另一个插件http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/
