jQuery:複数行の文章の文末を三点リーダーにする方法

こんにちは、タクゾウです。
複数行の文章の文末を三点リーダーにする方法を紹介したいと思います。

DEMO・参考サイト

DEMO

参考 Three Dots

参考サイトはこちらです。自分では普段書かない書き方だったのでとても勉強になりました。

参考 意外と需要がある(泣)文字数を省略して「...」にしたい。複数行のとき!

三点リーダーするコード

わかりやすいようにコメント多めで書いています。

JavaScript
/*
* 三点リーダー
* @param {string}
* @return none
*/
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');
});

使用方法

threeDots()関数を呼び、引数に三点リーダーをつける要素のクラスを指定する。

DEMOでは、適応させる要素に、「threeDots」を指定しています。

JavaScript
//DOMがよみこまれた段階で実装
$(function(){
  threeDots('.threeDots');
});

三点リーダーを適応させる要素に、固定値で高さを指定する。

クローンの高さが160pxより高い場合に三点リーダーを追加する実装をします。

css
.card-txt{
  height: 160px;
}

まとめ

今回の実装の場合、要素内のテキストを入れ替える処理をしているので、
リサイズに対応させる場合は、擬似要素などで三点リーダーを重ねる実装が必要です。

Web制作を勉強している人の参考になれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA