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>
いろいろ制約ありますが、ニッチな場面で役に立つことがあるかもしれませんのでよければ。
ダウンロード(右クリック>名前を付けてリンク先を保存)