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

複数行のテキストを ... で省略する便利なCSSプロパティとして -webkit-line-clamp があります。

このCSSプロパティは使用方法に制限がありdisplayプロパティに -webkit-box or -webkit-inline-box を設定して、かつ -webkit-box-orientプロパティに vertical を設定する必要があります。

/* 大抵はこんな感じで指定する */
{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

ここで指定する -webkit-box の正体は flex プロパティのベンダープレフィックスです。
flexが草案時代に WebKit で flex を利用するときに使われていたプロパティです。

情報はWHATWGのページを参考にしました。