jQueryでたった5行の記述で長いテキストを「…」で省略する

テキストをJavaScriptで省略して語尾に「･･･」を付けたいケースは割とよくある。jQueryプラグインなども存在するがjQueryを読み込んでいるのであればこのように5行の記述で長いテキストを「…」で省略することが可能。

by iwbjp

HTML

<div class="abbr">テキストが入ります。10文字以降は「･･･」が表示される。</div>
<div class="abbr">textが入ります。10文字以降は「･･･」が表示される。</div>

JavaScript

//.abbrがついている箇所を
//10文字に省略して語尾に「･･･」と付ける
$(".abbr").each(function(){
    var txt = $(this).text();
    txt = txt.substr(0, 10);
    $(this).text(txt + "･･･");
});