jQueryって便利ですよね。最近私もお世話になってます。

なのでちょっくら私もプラグインっぽいの書いてみたいな、と思って作ってみた=タイトルです。

;(function($){
  $.fn.snip = function(txt){
    if (!txt) txt = "...";
    return this.each(function(i){
      var e = $(this), h = e.height(), s = e.text(), t = s.length, u = 0;
      e.height("auto");
      if(h < e.height()){
        while(u < t){
          var w = Math.floor((u + t) / 2);
          e.text(s.substring(0, w) + txt);
          if(h < e.height()){ t = w - 1; }
          else{ u = w + 1; }
        }
        e.text(s.substring(0, u - 1) + txt);
      }
      e.height(h);
    });
  };
})(jQuery);

widthとheightが指定されたblock要素について、要素からはみ出る文字を….に置き換えます。

※ただし、block要素の中身をtext()メソッドで書き換えるので、block要素内でタグとか使ってたら残念なことになります。

また、!importantとか指定されてるとうまく動きません。

動作サンプル

<style>
blockquote {width:200px;height:60px; background-color:#ff0;}
</style>
<script>
$(function(){
  $("blockquote").snip();
})
</script>
<body>
走れメロス/太宰治
<blockquote>
 メロスは激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。
</blockquote>

いろいろ制約ありますが、ニッチな場面で役に立つことがあるかもしれませんのでよければ。

ダウンロード(右クリック>名前を付けてリンク先を保存)