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

関連記事

  1. flexible-bootstrap-carousel
  2. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

  3. JavaScript

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「equalize.js」

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「e…

  4. Palette-js

    JavaScript

    美しいカラーパレッドを追加できる「Palette-js」

    Palette-jsは美しいカラーパレッドを手軽にプロジェクトに追加す…

  5. JavaScript

    レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」

    before-after.jsはシンプルでレスポンシブに対応したビフォ…

  6. JavaScript

    ウェーブ(波形)を簡単に描いてくれるjQueryプラグイン「Wave」

    WaveというjQueryプラグインを使ってみました。これを使えばウェ…

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP