jQueryテキストの切り捨て（詳細を読む）
私の質問は「 テキストを340文字に切り詰める に非常に似ていますが、jQueryにあります。それは非常に簡単に聞こえましたが、私が周りを検索したとき、それについての参照を見つけることができませんでした。
わかりました、divがあります$('#content')テキストを「x」文字にトリミングしたいので、「600」と言いましょう[〜＃〜]しかし[〜＃〜 ]言葉そのものを壊したくない！ NOT 'The Ques ...' BUT 'のように質問... '。
テキストの残りの部分はどうなりますか？ええと、それを非表示にして、要求に応じて表示します！しかし、待ってください、それは最初に '...'を削除し、場所の直後にテキストを表示する必要がありますそれは隠れた。
$（ '＃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>
ロード方法：
かつて真夜中の退屈な生活のなかで、私は弱くて疲れ果てていたが、忘れられた伝承の多くの趣のある好奇心旺盛なボリュームを越えて。
サンプルテキストの記述は... [続きを読む]
「Read More」をクリックした後：
かつて真夜中の退屈な生活のなかで、私は弱くて疲れ果てていたが、忘れられた伝承の多くの趣のある好奇心旺盛なボリュームを越えて。
サンプルテキストを書くのはとても退屈です。
特に、コピーアンドペーストを行わないほどの馬鹿げている場合。ああ！
一度それは大英帝国のならず者と狂信を保護しました。カンガルー島の準備が整いました。荒れ狂う島の荒野に冒険し、手つかずのブッシュランドや、アザラシ、ペンギン、アシカのコロニーを探し求めている自然のままのビーチを横断します。コアラ、ゴアナ、エキドナ、島に生息するカンガルーの種など、土地を愛する地元の人々に会ってください。
UPDATE：この2つのプラグインが基本的にこのベストアンサーと同じ機能を果たすことを発見しました。ただし、最良の答えには、これらのプラグインにはない機能がいくつかあり、その逆も同様です。
このコードは、タグのバランスが常にとれていること、およびクローザーのない唯一のタグが<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>
以下は、段落タグを失ってもかまわない場合にテキストの量を制限するために機能します。
<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>
まあ、それのためのプラグインがあります。 jQuery Expander 。