我的问题与“Trim text to 340 chars”非常相似，但在 jQuery 中。这听起来很直接，但是当我四处搜索时，我找不到任何参考资料。
好的，我有一个div $('#content')我想将文字修剪为'x'字符数量让我们说'600'但是我不希望它破坏这个词它自己！喜欢NOT' The Ques ... '但是' 问题...... '。
其他文字会发生什么？好吧，我隐藏它并会根据要求显示它！但是等一下，首先应该删除“ ... ”并在隐藏文本后立即显示文字。
以下是$（'＃content'）的示例结构：
<div id="content">
<p>Once upon a midnight dreary, while I pondered weak and weary,Over many a quaint and curious volume of forgotten lore.</p>
<p>Writing example text is very boring.</p>
<p>Specially when you are dumb enough not to copy and paste. Oh!</p>
<p>Once it sheltered the rogues and rapscallions of the British Empire; now Kangaroo Island is ready and waiting for some derring-do of your own. Venture into the rugged wilds of the island, traversing untamed bushland and pristine beaches seeking out seal, penguin and sea lion colonies. Meet the land loving locals - koalas, goannas, echidnas and the island's own species of kangaroo. </p>
</div>
如何加载：
在午夜沉闷，而我 思索着疲惫不堪，疲惫不堪 古怪和好奇的卷被遗忘 绝杀。
编写示例文本是...... [读取 更多]
点击“阅读更多”后：
在午夜沉闷，而我 思索着疲惫不堪，疲惫不堪 古怪和好奇的卷被遗忘 知识。
编写示例文本非常无聊。
特别是当你不够傻的时候 复制和粘贴。哦！
一旦它庇护了流氓和 大英帝国的呐喊; 现在袋鼠岛准备好了 等待你的某些事情 拥有。冒险进入崎岖的野外 岛上，穿越野性 丛林和原始海滩寻求 密封，企鹅和海狮 群落。满足土地爱好的当地人 - 考拉，高粱，针鼹和岛上自己的袋鼠种类。
更新 我发现这两个插件与这个最佳答案基本相同。然而，最佳答案有一些功能，这些插件没有，反之亦然！
答案 0 :(得分：21)
如果您不介意丢失段落标记，以下内容可用于限制文本量。
<script type="text/javascript">
var shortText = $("#content").text() // get the text within the div
.trim() // remove leading and trailing spaces
.substring(0, 600) // get first 600 characters
.split(" ") // separate characters into an array of words
.slice(0, -1) // remove the last full or partial word
.join(" ") + "..."; // combine into a single string and append "..."
</script>
答案 1 :(得分：13)
嗯，有一个插件。 jQuery Expander
答案 2 :(得分：11)
此代码假定标记始终是平衡的，并且唯一没有关闭标记的标记将为<br />（尽管如果需要可以很容易地补救）。
#content {
width: 800px;
clear:both;
clip:auto;
overflow: hidden;
}
.revealText {
background: white; /* Strange problem in ie8 where the sliding animation goes too far
if revealText doesn't have a background color! */
}
.hiddenText {
}
.readMore {
cursor: pointer;
color: blue;
}
.ellipsis {
color: black;
}
$('document').ready(function() {
truncate('#content');
$('.readMore').on('click', function() {
var $hidden = $('.hiddenText');
if($hidden.is(':hidden')) {
$hidden.show();
$(this).insertAfter($('#content')).children('.readMoreText').text(' [Read Less] ').siblings().hide();
} else {
$(this).appendTo($('.revealText')).children('.readMoreText').text(' [Read More] ').siblings().show();
$hidden.hide();
}
});
$('.readMore').click();
function truncate(element) {
$(element + ' p').css({display: 'inline'});
var theText = $(element).html(); // Original Text
var item; // Current tag or text area being iterated
var convertedText = '<span class="revealText">'; // String that will represent the finished result
var limit = 154; // Max characters (though last word is retained in full)
var counter = 0; // Track how far we've come (compared to limit)
var lastTag; // Hold a reference to the last opening tag
var lastOpenTags = []; // Stores an array of all opening tags (they get removed as tags are closed)
var nowHiding = false; // Flag to set to show that we're now in the hiding phase
theText = theText.replace(/[\s\n\r]{2,}/g, ' '); // Consolidate multiple white-space characters down to one. (Otherwise the counter will count each of them.)
theText = theText.replace(/(<[^<>]+>)/g,'|*|SPLITTER|*|$1|*|SPLITTER|*|'); // Find all tags, and add a splitter to either side of them.
theText = theText.replace(/(\|\*\|SPLITTER\|\*\|)(\s*)\|\*\|SPLITTER\|\*\|/g,'$1$2'); // Find consecutive splitters, and replace with one only.
theText = theText.replace(/^[\s\t\r]*\|\*\|SPLITTER\|\*\||\|\*\|SPLITTER\|\*\|[\s\t\r]*$/g,''); // Get rid of unnecessary splitter (if any) at beginning and end.
theText = theText.split(/\|\*\|SPLITTER\|\*\|/); // Split theText where there's a splitter. Now we have an array of tags and words.
for(var i in theText) { // Iterate over the array of tags and words.
item = theText[i]; // Store current iteration in a variable (for convenience)
lastTag = lastOpenTags[lastOpenTags.length - 1]; // Store last opening tag in a variable (for convenience)
if( !item.match(/<[^<>]+>/) ) { // If 'item' is not a tag, we have text
if(lastTag && item.charAt(0) == ' ' && !lastTag[1].match(/span|SPAN/)) item = item.substr(1); // Remove space from beginning of block elements (like IE does) to make results match cross browser
if(!nowHiding) { // If we haven't started hiding yet...
counter += item.length; // Add length of text to counter.
if(counter >= limit) { // If we're past the limit...
var length = item.length - 1; // Store the current item's length (minus one).
var position = (length) - (counter - limit); // Get the position in the text where the limit landed.
while(position != length) { // As long as we haven't reached the end of the text...
if( !!item.charAt(position).match(/[\s\t\n]/) || position == length ) // Check if we have a space, or are at the end.
break; // If so, break out of loop.
else position++; // Otherwise, increment position.
}
if(position != length) position--;
var closeTag = '', openTag = ''; // Initialize open and close tag for last tag.
if(lastTag) { // If there was a last tag,
closeTag = '</' + lastTag[1] + '>'; // set the close tag to whatever the last tag was,
openTag = '<' + lastTag[1] + lastTag[2] + '>'; // and the open tag too.
}
// Create transition from revealed to hidden with the appropriate tags, and add it to our result string
var transition = '<span class="readMore"><span class="ellipsis">...</span><span class="readMoreText"> [Read More] </span></span>' + closeTag + '</span><span class="hiddenText">' + openTag;
convertedText += (position == length) ? (item).substr(0) + transition
: (item).substr(0,position + 1) + transition + (item).substr(position + 1).replace(/^\s/, ' ');
nowHiding = true; // Now we're hiding.
continue; // Break out of this iteration.
}
}
} else { // Item wasn't text. It was a tag.
if(!item.match(/<br>|<BR>/)) { // If it is a <br /> tag, ignore it.
if(!item.match(/\//)) { // If it is not a closing tag...
lastOpenTags.push(item.match(/<(\w+)(\s*[^>]*)>/)); // Store it as the most recent open tag we've found.
} else { // If it is a closing tag.
if(item.match(/<\/(\w+)>/)[1] == lastOpenTags[lastOpenTags.length - 1][1]) { // If the closing tag is a paired match with the last opening tag...
lastOpenTags.pop(); // ...remove the last opening tag.
}
if(item.match(/<\/[pP]>/)) { // Check if it is a closing </p> tag
convertedText += ('<span class="paragraphBreak"><br> <br> </span>'); // If so, add two line breaks to form paragraph
}
}
}
}
convertedText += (item); // Add the item to the result string.
}
convertedText += ('</span>'); // After iterating over all tags and text, close the hiddenText tag.
$(element).html(convertedText); // Update the container with the result.
}
});
<div id="content">
<p>Once upon a midnight dreary, while I pondered weak and weary,Over many a quaint and curious volume of forgotten lore.</p>
<p>Writing example text is very boring.</p>
<p>Specially when you are dumb enough not to copy and paste. Oh!</p>
<p>Once it sheltered the rogues and rapscallions of the British Empire; now Kangaroo Island is ready and waiting for some derring-do of your own. Venture into the rugged wilds of the island, traversing untamed bushland and pristine beaches seeking out seal, penguin and sea lion colonies. Meet the land loving locals - koalas, goannas, echidnas and the island's own species of kangaroo. </p>
</div>
答案 3 :(得分：-1)
您可以使用jQuery Expander插件轻松完成此操作。 http://plugins.learningjquery.com/expander/index.html#download？