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

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

by iwbjp

HTML

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

JavaScript

$(".abbr").each(function(){
    var txt = $(this).text();
    if(txt.length > 10){
        txt = txt.substr(0, 10);
        $(this).text(txt + "･･･");
    }
});