やりたいこと
複数行テキストの末尾を…（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 が使えます！