jQuery div/paragraph 标签中的最大字符数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19425555/
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
Maximum amount of characters in a div/paragraph tag
提问by Stefan R
I've created a 'New system' and I'd like the home page to show up to 300 characters per news article, and add an hyperlink "Read more" automatically at the end of the 300 characters (if needed). However, how would I do this?
我创建了一个“新系统”，我希望主页每篇新闻文章最多显示 300 个字符，并在 300 个字符的末尾自动添加一个超链接“阅读更多”（如果需要）。但是，我将如何做到这一点？
I do not know what it is called and I couldn't find an answer on my question by just googling. I did find similair questions, like: Limiting the no of characters in a div has specific classBut it doesn't completely fit my question.
我不知道它叫什么，我无法通过谷歌搜索找到我的问题的答案。我确实发现了类似的问题，例如：限制 div 中的字符数具有特定的类但它并不完全适合我的问题。
Here is an example what it should look like:
这是它应该是什么样子的示例：
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cil**...Read more**
Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua。Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat。Duis aute irure dolor in reprehenderit in voluptate velit esse cil**...阅读更多**
Thanks in advance!!
提前致谢！！
回答by zur4ik
jQuery way:
jQuery方式：
If you want to put only 300 characters, then you must use jQuery framework or pure Javascript.
如果你只想放 300 个字符，那么你必须使用 jQuery 框架或纯 Javascript。
Note:just change #your-div-idand put your div ID.
注意：只需更改#your-div-id并输入您的 div ID。
var myDiv = $('#your-div-id');
myDiv.text(myDiv.text().substring(0,300))
.
.
Pure JavaScript way:
纯 JavaScript 方式：
Note:just change #your-div-idand put your div ID.
注意：只需更改#your-div-id并输入您的 div ID。
var i;
var divs = document.getElementById('#your-div-id');
for(i=0;i<divs.length;i++) {
if(divs[i].className == 'myclass') {
divs[i].innerHTML = divs[i].innerHTML.substring(0,300);
}
}
Add Read Moreat the end:
Read More在最后添加：
if you want to add Read Moreat the end of each substringed paragraph, then you need to use pure Javascript or jQuery ways:
如果要Read More在每个子字符串的末尾添加，则需要使用纯 Javascript 或 jQuery 方式：
jQuery way:
jQuery方式：
var myDiv = $('#your-div-id');
myDiv.text(myDiv.text().substring(0,300) + '<a href="#">Read more</a>')
.
.
Pure JavaScript way:
纯 JavaScript 方式：
var i;
var divs = document.getElementsById('#your-div-id');
for(i=0;i<divs.length;i++) {
if(divs[i].className == 'myclass') {
divs[i].innerHTML = divs[i].innerHTML.substring(0,300) + '<a href="#">Read more</a>';
}
}
FYI
供参考
Also there is a pure CSS way to substring text in box, but it has no option to manually put character limit:
还有一种纯 CSS 方法可以在框中对文本进行子字符串处理，但它没有手动设置字符限制的选项：
CSS way:
CSS方式：
You can achieve this by pure CSS:
您可以通过纯 CSS 实现此目的：
#your-div {
text-overflow:ellipsis;
}
it will automatically cut text and put ...at the end of the box.
它会自动剪切文本并放在...框的末尾。
Please note, that it will not restrict browser to put only 300 characters. It will just fill the box.
请注意，它不会限制浏览器只能放置 300 个字符。它只会填满这个盒子。
回答by Valerio Cicero
Hi you can try like this....
你好，你可以这样试试....
Check the length of the div, if >300 make a substring and make the div content with substring+"...". Append to the div a link with a listener that replace all content of the div with the original content, or just add a link to the complete article.
检查div的长度，如果>300做一个子串，用substring+"..."来做div的内容。将带有侦听器的链接附加到 div，该链接将 div 的所有内容替换为原始内容，或者仅添加指向完整文章的链接。
var str = $('#mydiv').text();
if(len>300){
var new_str = str.subtstr(0,300);
new_str += '<div data="'+str+'">' + new_str + '... </div>';
var newDiv = $(new_str);
var link_read_more = $('<a class="read_more">Read more</a>');
link_read_more.click(function(){
var originaltext = $(this).parent().attr('data');
$(this).parent().html(originaltext);
});
newDiv.append(link_read_more);
}
