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:
Titulo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat feugiat nunc nec aliquet. Suspendisse nisi odio, posuere a dapibus quis, tincidunt eu lorem. Donec ut ornare nisl, a ornare dolor. Integer vestibulum, dui eu lacinia sodales, neque ante dapibus magna, ac ornare lorem lectus tempor nunc. Duis elementum, tortor nec tincidunt suscipit, ante lacus rutrum tellus, id fermentum nulla lectus ac risus. Nulla aliquet, ligula eget finibus imperdiet, augue metus consectetur justo, ac tempus nunc lectus vitae eros. Aliquam iaculis vestibulum ultrices.
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):
Titulo
Para limitar o tamanho em várias linhas:
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):
Titulo
Muito obrigado e até a próxima.