システムでHTMLを出力する場合に良くあるのが想定よりも文字数が多くて溢れてしまうケースです。スタイルシートのオーバーフローで切り捨ててしまっても良いですが、突然文字が切れてしまうのは何となく違和感があります。 そこで用いるのが一定の文字数以上の場合、**…**で締めるというものですが、文字数と切れる場所が常にちょうど良いとは限りません（特に日本語、英語が混ざった場合）。そこで使ってみたいのがjQuery.dotdotdotです。

jQuery.dotdotdotは指定した行数で文字数を区切ってくれます。同様のライブラリとしてはtrunk8が知られています。

左側が溢れた場合。右側はjQuery.dotdotdotによる補正後です。

…だけでなく、Read moreのように文字を指定することもできます。

HTMLにも対応しており、マークアップが適切に反映されています。単純にちょん切る訳ではありません。

幅の変更にもフレキシブルに対応します。

縮めると表示内容が変更されます。

URLの場合、中間を省略してくれます。これは結構嬉しいかも。

使い方は簡単で、

$(".ellipsis").dotdotdot()

だけでOKです。後はオプションとして、Read moreや幅の変更をウォッチしたりといった指定ができます。trunk8はレガシーなブラウザに対して不具合があるのですが、機能が豊富すぎて修正が難しかった覚えがあります。jQuery.dotdotdotは実装がシンプルそうなのでカスタマイズもしやすそうです。 jQuery.dotdotdotはjQuery/JavaScript製、MIT License/GPLのオープンソース・ソフトウェアです。 jQuery.dotdotdot, advanced cross-browser ellipsis for multiple line content. BeSite/jQuery.dotdotdot