When displaying a fixed number of lines of text, redundant text is folded into...

In the past, I always used flexible layout flex, but never used -webkit-box. Today, I found that some big manufacturers are using it. Let’s summarize it in case of emergency.

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;
}

Among the important styles:

    font-size: 16px;
    line-height: 24px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; //The number of lines to display text is 2, if there is extra text , will be displayed as...
    overflow: hidden; //It will be hidden beyond two lines