CSS

複数行テキストの末尾省略をCSSのみで実現する

やりたいこと

複数行テキストの末尾を…(3点リーダー)で省略したい。
このとき、JavaScriptを使わずCSSだけで実現したい。

なんでCSSだけで?

JavaScriptで末尾省略する方法だとある程度の行数のコードを書かないといけない。
また、ライブラリを使う方法もあるが、バージョンアップやjQuery依存など考慮するべき点がいくつかある。

CSSで実現できれば上記のような心配が少なく、保守性を維持しやすいかと思いCSSだけで実現する方法を探した。

実現方法

CSS line-clamp を使う

display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

メリット
- 少ない行数で実現できる
- 幅が可変でも変な隙間ができたりせず綺麗に表示できる

デメリット
- IE, Firefoxで未対応

  • モバイル対応のみならば使える(Android版のFirefoxユーザーもいるが…)
  • 使う場合はフォールバックも設定しておくのが望ましい。
    参考: https://codepen.io/martinwolf/pen/qlFdp

before, after要素を使う

.ellipsis {
    position: relative;
    height: 80px;
    overflow: hidden;
    line-height: 20px;
}

.ellipsis:before, .ellipsis:after {
    position: absolute;
    background: #fff;
}

.ellipsis:before {
    content: "・・・";
    bottom: 0;
    right: 0;
}

.ellipsis:after {
    content: "";
    width: 100%;
    height: 100%;
}

copied by http://blog.keisuke11.com/webdesign/word-trim/

メリット
- どのブラウザでも動作する

デメリット
- 行数は多めでハック感もややあり
- テキストの末尾と…(3点リーター)との間に隙間ができることがある(特に幅が可変のとき)

PC対応が必要でどうしてもFirefoxを外せない場合はこちら。
個人的には2つ目のデメリットが看過できないので使いたくない…。

まとめ

Firefoxさん!CSS line-clamp対応してくれー!
(IEはいいです)