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>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。