こんにちは！オルターブースアドベントカレンダー12日目は、
弊社ただ一人のフロントコーダーの榛葉（しんば）が担当します！
今回は複数行に対応した3点リーダー（...）をCSSで実装する方法をシェアしたいと思います。
複数行に対応とは、文章が3行以上になるとき、2行目の文末に3点リーダーを配置するような装飾のことを指しています。
まず
従来通りのCSS onlyな方法だと3点リーダーは必ず1行目に付いてしまい、複数行に対応した3点リーダーを配置したい場合は、JSで処理を入れる必要がありました。
しかしながら現在ではベンダープレフィックスと呼ばれる「-webkit」を使用すればCSSのみで装飾することが可能です。
webkitはChromeやSafari系としておなじみですが、firefoxやedgeを始めとしたメジャーブラウザであれば相互に利用することが可能なCSSクラスが増えています。
今回使用する「-webkit-line-clamp」はfirefoxは68以降、Edgeなら17以降で対応済で、全体の約91.19％ユーザーに正常表示されるようです。
あらかじめユーザーの使用ブラウザやそのバージョンを指定できるプロダクトであれば導入は一層容易だと思います。
ベンダープレフィックスの対応表は下記サイトを参考に確認することができます。 https://caniuse.com/#search=line-clamp
webkitはChrome/Safariだけ！と思いこんでいた時期がありましたが、実際に調べてみることが大事ですね。
実際のソースコード
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
See the Pen povbyxe by しんば (@shinba_tw) on CodePen.
たった4行で複数行に対応した3点リーダーを実装することができます。
まとめ
先述したとおり、全ユーザー中91.19％に正しく表示されますが、逆を返せば約9％のユーザーには機能しませんのでご注意ください。あらかじめ想定ブラウザが決まっているプロダクトで使用するか、フォールバック（機能しなかった時のための保険）を設定するのが良いかと思います。
過去めちゃくちゃ苦戦した複数行3点リーダーがこんなに楽に実装できるなんてすばらしい！と感じたのでシェアさせていただきました。
13日目のアドベントカレンダー記事もおたのしみに！
