複数行でtext-overflow: ellipsis;みたいなことをしたいときの対処法

たぶんこれが決定版。

特徴

・CSSのみ
・マルチブラウザ対応
・指定行数に満たない場合は省略記号が表示されない
・最終行の途中でテキストが終わる場合も省略記号は表示されない

唯一の欠点

・背景が画像やグラデーションのときに使えない

コード例

背景が白で3行で省略する場合。ちょっとした微調整は必要になるかもしれません。

.ellipsis {
    overflow: hidden;
    position: relative;
    line-height: 1.2em;
    max-height: 3.6em;
    text-align: justify;

    &::before {
        content: '...';
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: #fff;
        width: 1em;
    }

    &::after {
        content: '';
        position: absolute;
        right: 0;
        width: 1em;
        height: 1.2em;
        background-color: #fff;
    }
}

理屈

::before要素で省略記号...を表示させ、省略不要な場合は::after要素で上書きされるようになっています。

参考

上記のサイトでは表示ブロックの右側に省略記号が現れるようになっていたので、今回は最後の文字部分に表示されるよう調整しました。また、こちらのサイトではmixinも紹介されていますので、そちらも参考になると思います。

この記事が気に入ったらサポートをしてみませんか?