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. stickUp2

    JavaScript

    スクロールしてもついてくるスティッキー実装「stickUp2」

    stickUp2はスクロールしてもついてくるシンプルなスティッキーを実…

  2. Scrolltab

    JavaScript

    スクロール移動させるタブを追加できるjQueryプラグイン「Scrolltab」

    ScrolltabというjQueryプラグインを使えばスクロール移動さ…

  3. Stripe.Com Navigation

    JavaScript

    コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

    ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウ…

  4. Stacked Strips

    JavaScript

    スタックしながらスクロールできるエフェクト実装「Stacked Strips」

    Stacked StripsはWebページをスクロールする時に、スタッ…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる

    すごくどうでもいい内容なんですが、ちょっとやってみたかったので素人なが…

  6. no-image

    JavaScript

    立体的なナビゲーションメニューを実装できる「Sidebar Menu Concept」

    Sidebar Menu Conceptは立体的なナビゲーションメニュ…

最近の記事

  1. COMOLI ベタシャンCPOシャツ(サックス)
  2. ハワイアナス ビーチサンダル
  3. 蓮の花
  4. チキンアラビアータ 石窯フィローネ
  5. ユニクロ ポロシャツ

アーカイブ

PAGE TOP