好的,我有一个div $(‘#content’)我想剪裁文本到’x’的字符数字让我们说’600’,但我不希望它打破自己的话!喜欢不是’的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>
如何加载:
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… [Read
@H_404_21@
More]点击“阅读更多”后:
Once upon a midnight dreary,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
@H_404_21@
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,echidnas and the island’s own species of kangaroo.
解决方法
#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').live('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,echidnas and the island's own species of kangaroo. </p> </div>