16.02.2025

Limitando Texto a Duas Linhas em um Div Usando CSS

Resposta Rápida

Para limitar o texto dentro de um div a duas linhas, configure a propriedade CSS line-height para definir a altura de uma linha. Em seguida, defina max-height para o dobro do valor de line-height. Use overflow: hidden; para ocultar o texto que excede o bloco e text-overflow: ellipsis; para exibir uma elipse quando o texto for truncado. Por exemplo:

.duas-linhas {
  display: block;
  line-height: 1.2em;
  max-height: 2.4em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="duas-linhas">
  Este é um texto extenso que enfatiza sua limitação a duas linhas. Se o texto for cortado, uma elipse aparecerá no final.
</div>

Observe que, devido ao uso de white-space: nowrap;, o texto não será quebrado em uma nova linha. Para adicionar elipses em blocos de múltiplas linhas, você precisará aplicar propriedades CSS adicionais.

Compreensão Profunda de CSS

Adaptação em Diferentes Telas

Em design responsivo, a elipse deve ser exibida corretamente, independentemente da largura do div. Utilize propriedades CSS específicas para que o texto seja truncado em uma altura correspondente ao limite de linhas, e isso deve funcionar independentemente do número de caracteres ou da largura do elemento.

.multi-line-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

O texto se adaptará a duas ou três linhas, dependendo do tamanho da tela, e a elipse indicará a presença de conteúdo adicional.

Testando Casos Limite

Considere a variabilidade causada por mudanças na janela do navegador ou no tamanho da fonte — sua solução deve ser robusta e flexível.

Desvantagens da Propriedade Line-Clamp

Lembre-se que nem todos os navegadores suportam -webkit-line-clamp. Verifique a compatibilidade e prepare soluções alternativas para versões desatualizadas do navegador.

Visualização

Visualmente, represente o texto como um longo rolo que precisa caber em dois compartimentos de um gabinete.

• Gabinete (🗄): [Compartimento 1, Compartimento 2]
• Rolo (📜): "Quanto mais longo o texto, mais difícil de encaixá-lo em um espaço limitado!"

Usando text-overflow: ellipsis;, garantimos que o texto se encaixe perfeitamente.

div.suaClasse {
  height: calc(2 * line-height);
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Agora o texto parece neat e bem organizado.

• 🗄: ["Quanto mais...", "o texto, mais..."]

Alternativa: JavaScript

Quando Considerar

Considere usar JavaScript quando não conseguir alcançar o resultado desejado com CSS. Pode ser útil para ajustes dinâmicos.

Abordagem Usando JavaScript

Para medir e truncar texto, bibliotecas como Shave.js ou jQuery.dotdotdot podem ser utilizadas.

Encontrando o Equilíbrio Ideal

Assegure-se de que o uso de JavaScript não degrade o desempenho do sistema ou prejudique a experiência do usuário no site.

Recursos Úteis

1. text-overflow | CSS-Tricks
2. -webkit-line-clamp | MDN
3. text-overflow em CSS | W3Schools
4. Limitando Comprimento de Texto a n Linhas Usando CSS | Stack Overflow
5. Posso usar... | Suporte para HTML5, CSS3 e outras tecnologias
6. Guia Completo para Flexbox | CSS-Tricks

Video

Navigation