Geovany Rodrigues
Posted on June 9, 2020
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.
💖 💪 🙅 🚩
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.