DEV Community

Geovany Rodrigues
Geovany Rodrigues

Posted on

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:
Alt Text

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


Enter fullscreen mode Exit fullscreen mode

O resultado será esse (Codepen):
Alt Text

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; 


Enter fullscreen mode Exit fullscreen mode

O resultado será esse (Codepen):
Alt Text

Muito obrigado e até a próxima.

Top comments (4)

Collapse
 
antonyandrei profile image
Antony Andrei de Souza Santos

Muito obrigado!! funcionou perfeitamente para mim!

Collapse
 
fogonoteclado profile image
fogonoteclado

Bom dia
Parabéns pelo conteúdo
No meu caso não funcionou . ele corta no sentido vertical metade do texto da segunda linha

Collapse
 
geovrodri profile image
Geovany Rodrigues

Bom dia, muito obrigado.
Qual dos dois tipos você está utilizando? Tentou olhar se seu height não está muito pequeno?

Collapse
 
toledomg profile image
Toledomg

Top demais!!!! Funcionou lindamente aqui