jQuery文本截断（阅读更多样式）
我的问题非常类似于“ 修剪文字到340个字符 ”，但在jQuery中 。 这听起来很直接，但当我四处搜索时，我找不到任何参考资料。
好吧，我有一个div $('#content')我想把文字修剪为’x’字符数量让我们说’600′ 但是我不希望它打破它自己的话！ 就像不是’ 问题…… ‘但是’ 问题…… ‘。
其他文本会发生什么？ 好吧，我隐藏了它，并会根据要求显示它！ 但是等一下，它应该首先删除’ … ‘并在它隐藏之后显示文本。
以下是$（’#content’）的示例结构：
Once upon a midnight dreary, while I pondered weak and weary,Over many a quaint and curious volume of forgotten lore.
Writing example text is very boring.
Specially when you are dumb enough not to copy and paste. Oh!
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.
它应该如何加载：
在午夜沉闷的时候，我思索着疲惫和疲惫，在许多古怪和好奇的遗忘传说中。
编写示例文本是… [阅读更多]
点击“阅读更多”后：
在午夜沉闷的时候，我思索着疲惫和疲惫，在许多古怪和好奇的遗忘传说中。
编写示例文本非常无聊。
特别是当你傻到不复制和粘贴时。 哦!
一旦它庇护了大英帝国的流氓和rapscallions; 现在袋鼠岛准备好等待你自己的一些东西了。 进入岛上崎岖的荒野，穿越野性丛林和原始海滩，寻找海豹，企鹅和海狮殖民地。 遇见土地爱好的当地人 – 考拉，goannas，针鼹和岛上自己的袋鼠。
更新：我发现这两个插件与这个最佳答案基本相同。 然而，最好的答案有一些function，那些插件没有，反之亦然！
- jTruncate
- 截短
此代码假设标签将始终保持平衡，并且没有闭合器的唯一标签将是
#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 = ''; // 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 = ''; // 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 = '... [Read More] ' + closeTag + '' + 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(/
|
/)) { // If it is a
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 tag convertedText += ('
'); // If so, add two line breaks to form paragraph } } } } convertedText += (item); // Add the item to the result string. } convertedText += (''); // After iterating over all tags and text, close the hiddenText tag. $(element).html(convertedText); // Update the container with the result. } }); Once upon a midnight dreary, while I pondered weak and weary,Over many a quaint and curious volume of forgotten lore.
Writing example text is very boring.
Specially when you are dumb enough not to copy and paste. Oh!
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.
如果您不介意丢失段落标记，以下内容可用于限制文本量。
好吧，有一个插件。 jQuery Expander 。
您可以使用jQuery Expander Plugin轻松完成此操作。 http://plugins.learningjquery.com/expander/index.html#download ？