Dica CSS: Limitar tamanho de um texto

E aí pessoal, hoje vou explicar algo bem simples mas muito importante para a criação de páginas. Sabe quando você tem um texto um texto muito grande mas só quer mostrar uma parte? Vou explicar como fazer isso sem a necessidade de JavaScript. Então vamos lá!!

Vamos considerar o seguinte cenário:

Para limitar o tamanho do texto (Apenas uma linha) basta colocar o seguinte código na sua classe CSS:

 max-width: 500px; // Limite maximo do texto white-space: nowrap; // Removendo quebra de linha overflow: hidden; // Removendo a barra de rolagem text-overflow: ellipsis; // Adicionando "..." ao final do texto 

O resultado será esse (Codepen):

Para limitar o tamanho em várias linhas:

 css overflow: hidden; // Removendo barra de rolagem text-overflow: ellipsis; // Adicionando "..." ao final display: -webkit-box; -webkit-line-clamp: 2; // Quantidade de linhas -webkit-box-orient: vertical; 

O resultado será esse (Codepen):

Muito obrigado e até a próxima.