No.181

テキストをDOM要素の端で丸めたい

　表示エリアの上限でテキストを丸める処理。三点リーダーをつけて文字をぶった切るアレだ。

　CSSのoverflow: hidden;を使えばある程度は達成されるのだけど、イマイチ精度が良くない。

　jQueryのプラグインで精度の良いものがあるのでそれを使おう。あわせてよく使うオプションも紹介しておく。

trunk8

　Rick Viscomi 氏作成のjQueryプラグインだ。
　同じような機能に jQuery.dotdotdot.js があるけど、個人的には trunk8 の方が精度が良い気がする。

　使い方はいたって簡単で、jQueryプラグインを読み込んだあと

<script type="text/javascript" src="trunk8.js"></script>

　ある要素に対して

<div class="dot">
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆえよわおん
</div>

　スクリプトを実行すればいい。

<script type="text/javascript">
$(function() {
  $('.dot').trunk8();
});
</script>

　ひとつ注意点がある。それはこのpluginは基本的に「ブロック要素」に対応していることだ。
　インライン要素でもうまくいくことがあるけど、複数のインライン要素がある場合などに、各要素の高さが取得できなくて誤動作するようだ。
　解決方法としては、使用するインライン要素にブロック要素属性を付加してやろう。それで正常に動作するようになるはずだ。

.dot {
  display: block;
}

オプション：行数

　デフォルトでは行数は1行になっている。
　複数行にするときはlinesプロパティで変更しよう。

$('.dot').trunk8({
  lines: 行数
});

Multi-Line

オプション：「もっと読む」

　省略部分に表示される「もっと読む」「read more」。自分で実装するとめんどくさいのだが trunk8 はそれも用意してくれている。
　公式サイトにサンプルがあるので興味がある人は勉強しよう。

Toggle