jQuery 指定文字数以下の文字列を切り捨て
文字列を指定数まで表示、全て表示で全文表示
jQuery
$(function () {
$('p.full').each(function(){
// 50文字以上であれば50文字分までを表示
// 50文字以下であれば通常通り表示
if ($(this).text().length > 50) {
$(this).after('<p class="part"></p>').hide();
$(this).next('p.part').append($(this).text().substr(0, 50) + ' ... ').append('<span>全て表示</span>');
}
});
// 全て表示をクリックすると全文表示
$('p.part span').click(
function () {
$(this).parent('p.part').hide();
$(this).parent('p.part').prev('p.full').show();
}
);
});
HTML
<p class="full">
jQueryは、高速で小さく、かつ機能豊富なJavaScriptライブラリです。
</p>
<p class="full">
jQueryは、高速で小さく、かつ機能豊富なJavaScriptライブラリです。多数のブラウザで動作し、使いやすいAPIを使用したHTML文書のトラバースや操作、イベント処理、アニメーション、Ajaxのようなものがはるかに簡単になります。汎用性と拡張性の組み合わせで、jQueryは、何百万人もの人々にはJavaScriptを記述する方法を変更しました。
</p>
サンプル
