【css】複数行テキストの末尾を３点リーダーで省略する

図のように最終行の末尾をCSSのみで３点リーダーで省略する方法についてアウトプットします。さまざまなサイトで書かれていたコードを、コピペしてもうまくいかなかったので誰かのためになれば幸いです。

結論

html

<div class="room-title">
  <a href="#">
    タイトル
  </a>
</div>

親要素

.room-title{
word-break: break-all;
display: block;　 /*今回の例では不要*/
}

子要素

.room-title a{
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

解説

まず、全体像を説明します。
親要素に「文字がblockの横幅をオーバーした場合、折り返しする」と「block要素であること」を設定します。
子要素（つまり、文字列が入る所）に「親要素をオーバーした分に関してはテキストが消える」と「何行目に消えるのか」を設定します。

親要素について

word-break: break-all;
これは文字が折り返し表示されるように設定するための記述。「word-break: break-word;」といった設定もある。
親要素はどうやらブロック要素を持っている必要があるらしく、aタグなどを親要素にする場合は要注意。

子要素について

display: -webkit-box;
この記述で要素の性質を変化させます。

overflow: hidden;
これではみ出したテキストを隠すように設定できます。

-webkit-box-orient: vertical;
あまり推奨された記述ではないようですが、この記述がないとうまくいきません。要素の方向性を決めるための記述だそうですが、よくわかりません。

-webkit-line-clamp: 2;
何行目で要素を非表示にするか決めます。一番上の図のように３行目で非表示にする場合は「-webkit-line-clamp: 3;」とします。

その他補足情報

・詳しくは調べていませんが、「-webkit-box-orient: vertical;」は一時期サポートされない時期があったらしく、推奨された記述ではないようです（現在はどうかは不明）。webkitはflexboxの記述が普及する黎明期に利用されていたものらしく、今では全てflexboxで代用できるとのこと。
・同様の機能はjsやJquaryでも実装できます。
・私が調べたサイトでは親要素、子要素の関係について記述されているものが少なかったので、うまくいかなかった人はそういう要素関係に注意して実装してみて下さい。