はみ出した文字を省略して3点リーダー「...」を付ける方法（複数行にも対応）

ボックスからはみ出した文字を省略して3点リーダー「...」を付けたい場合、
1行であればCSSに3行書き足すだけで対応できます。

HTML

<p style="width: 300px;">テキストテキストテキストテキストテキストテキストテキストテキスト</p>

CSS

p{

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

}

結果

テキストテキストテキストテキストテキストテキストテキストテキスト

ボックス内に2行以上表示して、はみ出した場合に省略する場合は上記のCSSでは対応できません。
jQueryを使います。

HTML

<p class="threeDots" style="width: 200px;">テキストテキストテキストテキストテキストテキストテキストテキスト</p>

CSS

p.threeDots{

  overflow: hidden;

  height: 30px;

}

js

function threeDots(name){

  $(name).each(function() {

    var $target = $(this);

    var html = $target.html();

    var $clone = $target.clone();//対象要素のクローンを作成する

    $clone//クローンにスタイルを適応

    .css({

      display: 'none',

      position : 'absolute',

      overflow : 'visible'

    })

    .width($target.width())

    .height('auto');

    $target.after($clone);//対象要素の最後にクローンを追加する。

    //クローンの高さが体操要素より高い場合は、文字列を一文字消す。

    while((html.length > 0) && ($clone.height() > $target.height())) {

    html = html.substr(0, html.length - 1);

    $clone.html(html + '...');

  }

  $target.html($clone.html());//対象要素にクローンの要素を格納する。

    $clone.remove();//クローンを削除する。

  });

}



//DOMがよみこまれた段階で実装

$(function(){

  threeDots('.threeDots');

});