实现文本固定行数显示时，多余文本折叠为...

以前总用弹性布局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;               //超出两行会隐藏