複数行のテキストを <code>...</code> で省略する便利なCSSプロパティとして <a href="https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp" target="_blank">-webkit-line-clamp</a> があります。
このCSSプロパティは使用方法に制限があり<code>display</code>プロパティに <code>-webkit-box</code> or <code>-webkit-inline-box</code> を設定して、かつ <code>-webkit-box-orient</code>プロパティに <code>vertical</code> を設定する必要があります。
<pre class="language-css"><code class="language-css">/* 大抵はこんな感じで指定する */
{
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;
 overflow: hidden;
}
</code></pre>
ここで指定する <code>-webkit-box</code> の正体は <code>flex</code> プロパティのベンダープレフィックスです。 
flexが草案時代に WebKit で <code>flex</code> を利用するときに使われていたプロパティです。
情報は<a href="https://compat.spec.whatwg.org/#css-keyword-mappings" target="_blank">WHATWGのページ</a>を参考にしました。

複数行テキストの省略時に使用される-webkit-boxについて簡単に調べました。

複数行テキストの省略と-webkit-boxについて

神奈川の田舎で働いてるフロントエンドエンジニアのブログ