使用Jquery修剪文本，使用可单击的“更多”，但保留文本格式
使用Jquery修剪文本，使用可单击的“更多”，但保留文本格式
提问于 2016-07-10 21:09:56
我不想使用下面的Jquery来截断下面div ID="content“中的文本，但是我也希望保留文本格式，因为当我使用jquery时，会丢失作为段落分隔符的文本。
我怎么才能解决呢？
var minimized_elements = $('#content');
minimized_elements.each(function() {
var t = $(this).text();
if (t.length < 300) return;
$(this).html(
t.slice(0, 300) + '<span>... </span><a href="#" class="more">More</a>' +
'<span style="display:none;">' + t.slice(300, 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();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
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
<br>
<br>
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
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-07-16 14:31:24
@Gerrit_Luimstra，谢谢你的帮助，你回答了我的第一个问题
@MugiwaraUK，谢谢你回答我的第二个问题，你的解决方案成功了！
Stack Overflow用户
发布于 2016-07-10 21:21:29
好的，现在发生的事情是，您只使用元素内部的文本。但是，您是说您也希望使用元素将切片文本添加到后面。
解决此问题的一个简单方法(如果您知道它是哪种类型的元素，例如段落元素)是：
$(this).html(
'<p>'+ t.slice(0, 300) + '</p>' + '<span>... </span><a href="#" class="more">More</a>' +
'<span style="display:none;">' + t.slice(300, t.length) + ' <a href="#" class="less">Less</a></span>'
);这就是你要找的吗？
编辑代码：
HTML：
<div id="element">
<p>Lorum ipsum dolor</p>
<p>Hello this is an example text..</p>
</div>
<p>What this does, is it iterates through each paragraph element.
It cuts it at 10 letters, but then a word can be slices in two,
which is not good.
So the script will continue to remove the last pieces of this cut word until it finds a space.</p>jQuery：
$("#element p").each(function(){
var text = $(this).text();
var sliced = jQuery.trim(text).substring(0, 10);
// inverse loop through the string to remove the charachters of the broken word...
for (var i = sliced.length - 1; i >= 0; i--) {
if(sliced[i] == " "){
// if a space occurs, break the loop, but remove this space:
sliced = sliced.slice(0, -1);
break;
} else {
// if the charachter is not a space, remove the charachter.
sliced = sliced.slice(0, -1);
}
}
// optional
sliced += " ... read more";
// output the text.
document.write("Outputs: " + sliced + "<br>");
// OR you can change the paragraphs text directly like this:
// $(this).text(sliced);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38296509
复制相关文章
相似问题
腾讯云开发者
