長い文字列の末尾を三点リーダー「…」にして省略する方法です。

Contents

  1. 文字列の末尾を省略する方法
  2. 複数行の末尾を省略させる方法

文字列の末尾を省略する方法

長い文字列を１行にしたい時は、CSSのみで調整が可能です。

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

ポイントとなるのは上記3つです。3点セットなので、省略させたい要素に上記３つのスタイルを設定すると、末尾が三点リーダーに変更されるのが確認できます。

See the Pen
CSS ellipsis by gri-t (@gri-t)
on CodePen.

複数行の末尾を省略させる方法

次は、複数行のテキストの末尾を省略する方法です。今度はCSSとJSを使用していきます。

まずは、HTMLの省略させたい要素に、何行目以降を省略させるのかdata-lineを使用して指定します。

<p class="ellipsis" data-line="2">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p class="ellipsis" data-line="3">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p class="ellipsis" data-line="4">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p class="ellipsis" data-line="5">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

次に、CSSでそれぞれのdata-lineの高さを設定し、はみ出したテキストはoverflow: hiddenで非表示になるように指定します。高さの指定はline-heihgtの倍数で指定してあげます。

.ellipsis {
  overflow: hidden;
  line-height: 1.8em;
}

.ellipsis:not[data-line], /* 1行の場合は先に紹介した方法を使用*/
.ellipsis[data-line="1"] {
 	text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis[data-line="2"] {
  height: 3.6em;　/* line-heightの倍数を指定 */
  -webkit-line-clamp: 2; 
}

.ellipsis[data-line="3"] {
  height: 5.4em;
  -webkit-line-clamp: 3;
}

.ellipsis[data-line="4"] {
  height: 7.2em;
  -webkit-line-clamp: 4;
}

.ellipsis[data-line="5"] {
  height: 9em;
  -webkit-line-clamp: 5;
}

あとは下記を適応してあげれば、複数行の末尾を省略することができます。

;(function($) {

$.fn.textOverflowEllipsis = function(config) {
    var defaults = {
        resize: true,
        numOfCharactersToReduce : 1,
        suffix: '...'
    };

    var options = $.extend(defaults, config);

    var TextOverflowEllipsis = {
        init : function($target) {
            $target
                .addClass('textOverflowEllipsis')
                .css({
                    overflow: 'hidden'
                });

            // オリジナルのテキストを取得・保持する
            var html = $target.attr('data-original', html);
            if (! html) {
                html = $target.html();
                $target.attr('data-original', html);
            }

        },
        execute : function($target) {
            var html = $target.attr('data-original', html);

            // 対象となる要素を複製し、非表示にする
            var $clone = $target.clone();
            $clone
                .html(html)
                .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 - options.numOfCharactersToReduce);
                $clone.html(html + options.suffix);
            }

            // テキストを入れ替えて、複製した要素は削除する
            $target.html($clone.html());
            $clone.remove();
        }
    };

        return this.each(function(index) {
            var $target = $(this);
    
            TextOverflowEllipsis.init($target);
    
            TextOverflowEllipsis.execute($target);
    
            if (options.resize) {
                var timer = null;
                $(window).resize(function() {
                    if (timer) {
                        clearTimeout(timer);
                    }
    
                    timer = setTimeout(function() {
                        TextOverflowEllipsis.execute($target);
                    }, 1000);
                });
            }
        });
    };
})(jQuery);