08.04.2025

Aplicando Reticências (...) em Texto de Múltiplas Linhas no CSS

Resposta Rápida

Para implementar o efeito de reticências após duas linhas, utilize as propriedades display: -webkit-box;, -webkit-line-clamp: 2; e -webkit-box-orient: vertical;. Ajuste o valor de max-height para que o texto se encaixe exatamente em duas linhas.

.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3em;
}

<div class="ellipsis">
  Este texto longo se encaixa perfeitamente em duas linhas e termina com uma reticência.
</div>

Lembre-se de que esse método é baseado na tecnologia Webkit e pode não ser suportado em alguns navegadores.

Garantindo Responsividade e Consistência

Compatibilidade entre Navegadores

As propriedades prefixadas -webkit- podem não funcionar em todos os navegadores:

• Estilize suas regras com base em princípios fundamentais e expanda-as para suportar line-clamp a fim de alcançar uma evolução progressiva.
• Para detectar as capacidades do navegador, utilize a regra @supports com -webkit-line-clamp.
• Como uma alternativa, JavaScript pode ser utilizado para navegadores que não suportam Webkit, mas esteja ciente dos possíveis problemas de desempenho.

Adaptando Tamanhos de Elementos

No design responsivo, os tamanhos dos elementos frequentemente mudam:

• Utilize media queries para ajustar max-height com base no tamanho da viewport.
• Adapte -webkit-line-clamp para diferentes resoluções de tela.
• Teste os estilos para garantir a legibilidade e evitar problemas na interface do usuário.

Usando Mixins para Desenvolvimento Acelerado

Um mixin SASS simplifica significativamente o processo de desenvolvimento:

@mixin two-line-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Você pode adicionar o mixin aos seus arquivos SASS:

.ellipsis {
  @include two-line-ellipsis;
  max-height: 3em;
}

Insights Críticos

Aqui estão alguns pontos chave a considerar:

Escolhendo max-height

• O tamanho de max-height deve ser baseado no tamanho da fonte; utilize unidades em.
• Tenha cuidado com o espaçamento entre linhas para evitar o transbordamento do texto.

Compreendendo Como Funciona

• Consulte o artigo de Chris Coyier para detalhes úteis.
• Aprofunde-se na propriedade text-overflow; sua funcionalidade vai além de apenas adicionar reticências.

Evitando Armadilhas

• Não use white-space: nowrap, pois isso impede que o texto quebre em uma nova linha.
• Considere recursos de localização: diferentes idiomas podem ocupar quantidades variadas de linhas.
• Diferentes idiomas podem ter diferentes comprimentos de linha, então as reticências devem sempre estar prontas para operar.

Visualização

É importante visualizar como o mecanismo "Reticências em Transbordo de Texto em Duas Linhas" funciona:

Fluxo de Texto ⚠️: "Este é um parágrafo muito significativo que deve ser cortado..."
Container 🚿:
| Este é um parágrafo mu... | <--- Primeira linha preenchida
| ...ito significante que   | <--- Segunda linha preenchida
Drenagem 🌀: "..."

As reticências (...) funcionam como uma drenagem, prevenindo o transbordamento e mantendo o texto dentro de duas linhas.

Aplicação Prática

Aprimore suas habilidades seguindo estas dicas:

Trabalhando com Exemplos

• Utilize o arquivo ZIP contendo um conjunto completo de exemplos para aprendizado.
• Adapte o código-fonte para uma compreensão mais profunda dos princípios.

Depuração e Correção

Se surgirem problemas:

• Verifique se os cálculos de max-height estão correspondendo aos tamanhos de fonte e espaçamento entre linhas.
• Use as Ferramentas de Desenvolvedor para ajustar os estilos.
• Preste atenção a como o texto aparece em displays de alta resolução, como Retina.

Aprendizado Contínuo

Mantenha-se atualizado:

• Adicione os MDN Web Docs aos seus favoritos para informações confiáveis e melhores práticas.
• Participe de discussões em fóruns sobre CSS para compartilhar conhecimento e experiências.

Recursos Úteis

1. Line Clampin' (Truncando Texto de Múltiplas Linhas) | CSS-Tricks - Uma discussão detalhada sobre como truncar texto de múltiplas linhas em CSS com exemplos práticos.
2. -webkit-line-clamp - CSS: Folhas de Estilo em Cascata | MDN - Guia oficial sobre como usar -webkit-line-clamp para truncar texto.
3. text-overflow | Codrops - Um guia abrangente sobre text-overflow, incluindo suporte a navegadores e exemplos.
4. Can I use... Tabelas de suporte para HTML5, CSS3, etc. - Verifique a compatibilidade dos navegadores para text-overflow e propriedades similares.
5. CSS Overflow Module Level 3 - Projeto do W3C sobre como lidar com transbordamento em CSS, incluindo gerenciamento de transbordamento de múltiplas linhas.

Video

Navigation