固定行数のテキストを表示する場合、冗長なテキストは折り畳まれます。

以前はフレキシブルレイアウト flex ばかり使っていましたが、-webkit-box は使ったことがありませんでしたが、大手メーカーでも採用されていることが分かりましたので、いざという時のためにまとめておきます。

HTML：

<div class="article-title">
	<a href="#"><h3 title="未来3年，做汽车操作系统的，99％都会死掉">未来3年，做汽车操作系统的，99％都会死掉</h3></a>
</div>

CSS：

.article-title a h3{
	font-size: 16px;
	color: #222;
	line-height: 24px;
	font-weight: 400;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; 
	overflow: hidden;
}

重要なスタイルには次のようなものがあります。

    font-size: 16px;
    line-height: 24px;
    display: -webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp: 2; //テキストを表示する行数が 2 の場合、余分なテキストがあり、次のように表示されます...
    overflow: hidden; // 2 行を超えると非表示になります