InsightsLimitar texto com ... em CSS
2a atrás
Ion
Primeiro, adicione em seu HTML alguma tag com texto, um titulo h1 com texto muito grande, por exemplo. Na tag, coloque a classe text-nowrap:
<h1 class="text-nowrap">Um título muito longo lorem ipsum dolor sit amet consectetur adipiscing elit. Sed rhoncus sem diam, non porta nibh rhoncus et. Integer tincidunt scelerisque massa vitae congue. Etiam at dui libero. Maecenas ullamcorper ipsum purus. Proin id est non neque varius interdum. Nullam ipsum dolor, mollis ac scelerisque nec, sagittis at sem. Pellentesque sapien.</h1>No CSS, descreva a classe text-nowrap:
.text-nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}undefined- overflow: hidden; esconde qualquer conteúdo que ultrapasse os limites do elemento- text-overflow: ellipsis; coloca ... se o texto ultrapassar os limites- white-space: nowrap; evita quebras de linha
Mais linhas
O exemplo anterior funciona bem para textos em 1 única linha. Caso você precise limitar a partir de um certo número de linhas, você pode fazer da forma a seguir. Comece adicionando um texto grande:
<p class="text-3-lines">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec malesuada odio, non consectetur nunc. Aliquam pretium turpis metus, et mattis enim ultrices imperdiet. Nunc luctus nulla malesuada, porta velit ut, gravida mi. Quisque nec massa commodo, tristique neque sit amet, tristique ipsum. Cras vitae pellentesque metus. Praesent mi nisi, ullamcorper quis accumsan sit amet, pellentesque ac magna. Quisque nulla felis, iaculis vel libero non, venenatis efficitur magna. Maecenas ligula nunc, consectetur nec augue ornare, dapibus mollis felis. Praesent magna risus, sollicitudin id feugiat ac, faucibus ut dolor. Duis imperdiet nec tortor et posuere. Pellentesque eget sollicitudin quam. Praesent vel.</p>Atente-se que estamos usando a classe text-3-lines. Nesse exemplo, vamos limitar o texto até 3 linhas. Use o CSS adiante:
.text-3-lines {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}Nessa classe estamos usando 3 novos estilos:- display: -webkit-box; dispõe os elementos flexívelmente- -webkit-box-orient: vertical; dispões os elementos na vertical- -webkit-line-clamp: 3; limita o número de linhas, nesse caso limitamos até 3 linhas
Comentários (0)