BETA

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

投稿日:2018-10-19
最終更新:2018-10-24

たぶんこれが決定版。

特徴

・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要素で上書きされるようになっています。

参考

http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/

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

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@oceant'の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう