Shorten

JavaScript

長いテキストを自動で短縮してくれるjQueryプラグイン「Shorten」

Shortenは指定した文字数以上の長いテキストを自動的に短縮してくれるjQueryプラグインです。いわゆるmoreタグを生成させることができます。リンクになっているのでこれをクリックすると全文が表示されます。

Shorten

デモ

moreをクリックすると短縮された分のテキストが表示されます。全部表示されるとmoreはlessというリンクになるので、lessをクリックすると短縮された状態に戻ります。

この手の機能はコメントやレビューなどに使われているのをよく見かけます。シンプルな機能ですが、そのぶん使いどころはたくさんありますね。

テキスト量が多くて見辛い時やスペースを有効的に活用したい時なんかにも役立つかと思います。

セッティングに関してもこのようにとてもシンプルで使い易いです。

$(element).shorten();

「more」や「less」といった文字は自分の好きなものにカスタマイズすることもできます。

$(element).shorten({
    moreText: 'read more',
    lessText: 'read less'
});



その他にも短縮された状態で表示させる文字数を指定したりといったことも可能です。

というわけで、長いテキストを自動的に短縮させて表示・非表示できるような機能を実装したい方は是非チェックしてみてください。

Shorten

Zoom Sliderズーム機能を備えたシンプルなコンテンツスライダー「Zoom Slider」前のページ

iPhoneのSafariで複数あるタブの順番を入れ替える(並べ替え)やり方次のページタブの順番を入れ替える

最近の記事

  1. ドリップコーヒー
  2. コールドブリューコーヒー
  3. カマキリ
  4. チキンサブジ
  5. trolox(トロロックス)
PAGE TOP