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.
Top comments (4)
Bom dia
Parabéns pelo conteúdo
No meu caso não funcionou . ele corta no sentido vertical metade do texto da segunda linha
Bom dia, muito obrigado.
Qual dos dois tipos você está utilizando? Tentou olhar se seu height não está muito pequeno?
Muito obrigado!! funcionou perfeitamente para mim!
Top demais!!!! Funcionou lindamente aqui