jQuery.dotdotdot」はボックス要素からはみ出た分のテキストを自動的に省略してくれるという地味に便利なjQueryプラグインです。

省略したあとに「続きを読む」というリンクをつけることもできますので、ネットショップでの商品の一覧などボックス要素の高さをそろえて見た目をきれいにしたいときなどにも活躍しそうです。

下のリンクからサンプルをごらんください。

要素からはみ出したテキストを省略してくれるjQueryプラグイン「jQuery.dotdotdot」サンプル


要素に収まりきれずはみ出した部分を「…」に置き換えて省略してくれるので、プラグインの名前は「dotdotdot」なんでしょうね。導入もわりと簡単です。



設置方法

まずは、jQuery.dotdotdotからjQueryプラグインjQuery.dotdotdot」をダウンロードします。

2016-11-24_1140
続いて<head>部分で必要なファイルを読み込ませます。パスに注意しましょう。


box要素のCSSを記述します。例えばこんな感じに。


そして対応させたいボックス要素を指定します。


任意の場所にHTMLを記述します。


これだけでボックス要素からはみ出したテキストは省略されます。

またオプションで「続きを読む」というリンクを付け加えることができます。
2016-11-24_1208


HTMLには次のように記述します。


他にもオプションがありますので、本家のサイトやサンプルを見てみてください。

最後にサンプルのソースを書いておきます。どうぞご参考まで。

この記事と関連してると思われる記事: