三点リーダ jQuery 複数行対応（trunk8）

trunk8とは

https://github.com/rviscomi/trunk8

文字列が固定枠に収まらない場合、文字の末尾に「…」を付け省略させる時に使います。
同じjQueryプラグインのdotdotdotもあるが、どうも日本語を含む文字には適していないので、私個人としてはモダンブラウザの対応としてtrunk8の方が優秀かと思っています。

仮のHTML

<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <p id="demo_trunk8" class="demo_trunk8_text">リテラシーが無いならそれ相応の態度で接しないとダメじゃないでしょうか。お客が低姿勢で文句を言わないのが当たり前だと思ってないでしょうか？本当のところ、知識がない貴方に望んだ物を手に入れる手段をこちらに相談もせず勝手に手法を決めて欲しくないんです、やりたいことを実現させる方法は他にもっと良い方法があるんです。あと、貴方が偉そうに接しているその他の人間も同じ人から生まれた同じ人間です。バカであってもバカにした態度をとったりせず、何を思っているか耳を傾けないと、本来人類が持つ意思疎通のツールを捨てている事と同じなんですよ。そう、聞くことを辞めた時点で貴方は人類の道を外れつつあるんですよ。最低限の意思疎通もできないのに細かい仕事のやり取りができるでしょうか？</p>
  </body>
</html>

JSの読み込み（jQuery、trunk8）

jQuery本体の準備と、trunk8をダウンロードしてきます。
https://github.com/rviscomi/trunk8

呼出しは適当に、、、head内にでも書いといたら良いんじゃないでしょうか。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="trunk8.js"></script>

続いて、trunk8の設定。

<script type="text/javascript">
$(function() {
  $('#demo_trunk8').trunk8({
    lines: 2,   //行数を指定、未設定の場合１行
    fill: '...' //省略時の末尾に付与させる文字を指定（無ければ「…」）
  });
  //以下は必要な時に記述「もっと読むの場合」
  $('#demo_trunk8').trunk8({
    fill: '...<a id="demo_trunk8_more" href="#">続き</a>'
  });
  $('#demo_trunk8_more').live('click', function (event) {
    $(this).parent().trunk8('revert').append('&nbsp;<a id="demo_trunk8_close" href="#">隠す</a>');
    return false;
  });
  $('#demo_trunk8_close').live('click', function (event) {
    $(this).parent().trunk8();
    return false;
  });
});
</script>

スタイルシート

必要なければ書かなくても良いが、状況に応じて「display: block;」入れとくのも重要。

<style>
.demo_trunk8_text {
  display: block;
  max-width: 100%;
  min-width: 75px;
}
</style>


以上

関連記事