Dica CSS: Limitar tamanho de um texto

geovrodri

Geovany Rodrigues

Posted on June 9, 2020

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.

💖 💪 🙅 🚩
geovrodri
Geovany Rodrigues

Posted on June 9, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to Animate an Emoji with CSS
beginners How to Animate an Emoji with CSS

January 5, 2022

Simple Guideline for Webdesign
beginners Simple Guideline for Webdesign

July 9, 2020