やりたいこと

複数行テキストの末尾を…（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で未対応~~ → IEで未対応
- モバイル対応のみならば使える（Android版のFirefoxユーザーもいるが…）
- 使う場合はフォールバックも設定しておくのが望ましい。

参考： https://codepen.io/martinwolf/pen/qlFdp

追記 2019.08.29

祝！ Firefox で対応されました。

https://caniuse.com/#search=webkit-line-clamp

※ちなみに Firefox for Android ではまだ未対応なのでモバイル対応が必要な場合は注意

IE（に最低限の）対応版

IE は推奨していないけど、レイアウトが崩れるのは困るなーくらいの対応でいい場合に使えるサンプルを書いてみた。
IE の場合は…（３点リーダー）は表示されず、はみ出した文は非表示(hidden)になる。

See the Pen CSS line-clamp with IE compatible by Sho Ezawa (@ezawa800) on CodePen.

IEで見た場合

IE以外でみた場合

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はいいです）

ありがとう Firefox さん！
これで安心して line-clamp が使えます！

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