É possível limitar a quantidade de texto para uma quantidade “X” de linhas utilizando CSS? A resposta é sim.
Existe uma forma, mas é apenas utilizando o webkit. Contudo, quando se combina com line-height: X e max-height: X*N, vai funcionar noutros browsers, apenas sem as reticências.
Vejamos o seguinte HTML:
Se quisermos limitar este texto para mostrar apenas as duas primeiras linhas de texto podemos fazê-lo utilizando o seguinte CSS:
.text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 16px; /* fallback */
max-height: 32px; /* fallback */
-webkit-line-clamp: 2; /* number of lines to show */
-webkit-box-orient: vertical;
}
Assim, o texto irá mostrar apenas duas linhas do total.
Em que situações isto é útil? Recentemente utilizei este código numa página com três colunas exibindo posts de notícias e as alturas dos blocos de texto eram diferentes devido à extensão do título.
Qualquer dúvida, como sempre, basta deixar um comentário.
Seu post foi bem didático, procurava uma solução rápida e com uma boa explicação, solucionou o problema que estava enfrentando em meu trabalho, agradeço por compartilhar seu conhecimento 🙂
Caraca, salvou minha pele num card horizontal aqui. Obrigado!