Dica CSS: Limitar tamanho de um texto

Geovany Rodrigues — Tue, 09 Jun 2020 23:04:43 +0000

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.

Forem: Geovany Rodrigues

Dica CSS: Limitar tamanho de um texto