En el pasado, siempre usaba flexible layout flex, pero nunca usé -webkit-box. Hoy, descubrí que algunos grandes fabricantes lo están usando. Resumámoslo en caso de emergencia.
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;
}Entre los estilos importantes:
font-size: 16px;
line-height: 24px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //El número de líneas para mostrar el texto es 2, si hay texto extra, se mostrará como...
overflow: hidden; //Se ocultará más allá de dos líneas