Dica CSS: Limitar tamanho de um texto

#beginners #css #design #webdev

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:

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;