文字列を指定した文字数で丸めるJQueryプラグイン[strimwidth.js]
文字列を特定の文字数で丸めたい時にphpだと mb_strimwidth 関数があります。
これと似たようなことが出来るjQueryプラグインを作りました。
使い方は簡単で、jQueryとjquery.strimwidth.jsを読み込んだら、指定の要素に以下のようにしてstrimwidth関数を実行してください。
オプションで widthに数値を渡すと丸める文字数が指定できます。（初期値：20）
trimmarkerに文字列を渡すとで最後に付け足す文字も変更できます。（初期値：…）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="block"> <p>このテキストは本当は１００文字あります。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p> </div> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript" src="jquery.strimwidth.js"></script> <script type="text/javascript"> $(function() { $('.block p').strimwidth({ width: 20, //丸める文字数 trimmarker: '…' //最後に付け足す文字 }); }); </script> |
これで↓のようなテキストだったのが…
↓このようになります。
jQueryのプラグインなので複数の要素にも適用可能です。
↓のように複数のp要素にも指定できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!-- .block --> <div class="block"> <p>このテキストは本当は１００文字あります。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p> <p>このテキストは本当は１００文字あります。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p> <p>このテキストは本当は１００文字あります。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p> </div> <!-- /.block --> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript" src="jquery.strimwidth.js"></script> <script type="text/javascript"> $(function() { $('.block p').strimwidth({ width: 20, //丸める文字数 trimmarker: '…' //最後に付け足す文字 }); }); </script> |
↓こうなります。
↓ダウンロードはこちらから↓
[Download – jquery.strimwidth.js]
