複数行のテキストを ... で省略する便利な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 を利用するときに使われていたプロパティです
![複数行テキストの省略と-webkit-boxについて | みどりのさるのエンジニア](https://cdn-ak-scissors.b.st-hatena.com/image/square/7bc905c4b24c5dc9d31f08dba8ed573ce7362dac/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fdspeq5lct%2Fimage%2Fupload%2Fl_text%3AMPLUSRounded1c-Bold.ttf_52%3A%25E8%25A4%2587%25E6%2595%25B0%25E8%25A1%258C%25E3%2583%2586%25E3%2582%25AD%25E3%2582%25B9%25E3%2583%2588%25E3%2581%25AE%25E7%259C%2581%25E7%2595%25A5%25E3%2581%25A8-webkit-box%25E3%2581%25AB%25E3%2581%25A4%25E3%2581%2584%25E3%2581%25A6%2Cco_rgb%3A000%2Cw_1020%2Cc_fit%2Cy_-100%2Fv1638629595%2Fblog-ogp.jpg)