Facebook Twitter Google Maps RSS
Home webサイト 【第6回】複数行の三点リーダーに対応するjQueryプラグイン 〜jQuery.ellipsis〜
formats

【第6回】複数行の三点リーダーに対応するjQueryプラグイン 〜jQuery.ellipsis〜

みなさんこんにちは!
そして、新年明けましておめでとうございます!
今年も引き続き記事を更新していこうと思います。

では早速ですが今月も便利なプラグインをご紹介したいと思います!

実は業務で文章がはみ出る場合に、省略を表す「…」三点リーダーを表示させたいという要望がありました。
初めてやる作業ではあったのですが、良く見る機能なだけに簡単に実現できるんだろうなとたかをくくっていました。。
ですが、いざ調べてみると意外に奥が深く、様々な実現方法がありました。
なかでも簡単だなと感じたのは、CSSで
text-overflow: ellipsis;
を指定するだけで表示領域からはみ出た場合は三点リーダーを表示してくれるものでした。
ですが、一つ問題があり、改行をさせないスタイル指定も必要なため複数行には対応していませんでした。。。

そこで今回ご紹介するプラグインの出番です!

    使い方

まずはjQueryとこのプラグイン(リンク)を読み込みます。
そして、三点リーダーをつけたいものに

    $(".foo").ellipsis();

このように初期化をします。
この時点で各種オプション指定も可能で、

    $(".foo").ellipsis({
        lines: 3,             
        ellipClass: 'ellip', 
        responsive: true      
    });

行数やクラス名の変更、レスポンシブ対応の有無など簡単に変更が可能です。

CSSの指定ですが、先ほどクラス名を変更したので、そのクラス名で指定してみます。

.ellip {
  display: block;
  height: 100%;
}

.ellip-line {
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  max-width: 100%;
}

.ellip,
.ellip-line {
  position: relative;
  overflow: hidden;
}

このように一行の場合は”-line”を指定クラス名の後につけると動作します。

簡単ではありますが、以上で説明は終了です!

まとめ


今回はプラグインのソースコードが250行ほどしかなく、一見簡単なのかなと思いましたが、
想像以上に内容が濃く、コードを短く書く方法など自分なりに参考になった部分がありました。
三点リーダーの複数行対応はCSSのみでもできたりするみたいなのですが、
今回はそのなかでも簡単な方法としてプラグインをご紹介させていただきました。

この記事が少しでもみなさまのお役に立てれば幸いです。

ではまた次回!!
 
弊社開発実績はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*