23.11.2024

CSS: Truncamento de Texto com Reticências no Final Sem Mudar o HTML

Resposta Rápida

Para adicionar reticências no final de texto truncado, use a propriedade CSS text-overflow: ellipsis:

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div class="ellipsis" style="width: 100px;">
  Este é o lugar onde um texto longo será colocado, que será truncado e finalizado com reticências se necessário.
</div>

A largura do contêiner define o limite; ao ultrapassá-lo, o mecanismo de reticências é acionado devido ao overflow.

Como Funciona a Propriedade de Reticências

A combinação das propriedades CSS text-overflow: ellipsis, overflow: hidden e white-space: nowrap possibilita a aparição das reticências. A propriedade white-space mantém o texto em uma única linha, impedindo que ele se quebre, enquanto overflow: hidden realiza o corte do texto excedente. A interação entre elas facilita o surgimento das reticências quando a largura especificada do contêiner é ultrapassada.

Truncamento em Múltiplas Linhas e Adaptação ao Tamanho da Tela

Para truncamento de texto em múltiplas linhas, use a combinação de -webkit-line-clamp e -webkit-box-orient: vertical;:

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Observe que a propriedade -webkit-line-clamp funciona de maneira mais eficaz em navegadores baseados em Webkit. Em conjunto com design responsivo e max-width em vez de width, as dimensões do contêiner e das reticências serão exibidas adequadamente em várias telas.

Hover: Revelando o Oculto

Para revelar o texto completo ao passar o mouse, você deve redefinir as propriedades white-space e text-overflow para suas configurações originais, marcando overflow como visível:

.ellipsis:hover {
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
}

O efeito resultante de hover é limpo e informativo.

Impacto da Propriedade de Display nas Reticências

A propriedade display influencia como text-overflow: ellipsis funciona. Para elementos em linha, use display: inline-block:

.inline-ellipsis {
  display: inline-block;
  /* Outras propriedades são semelhantes a .ellipsis */
}

Para elementos de bloco, basta especificar display: block.

Visualização

Pense em overflow: hidden como um controlador que corta o texto excedente:

Texto Original:
🎫 [Este texto é longo demais para caber aqui]

Após aplicar `overflow: hidden`:
🎫 [Este texto é trunc...]

A mesma transformação se aplica a todos os elementos, como um ingresso:

.ticket {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 200px; /* A largura do ingresso é estritamente fixa */
}

A verificação do ingresso é feita, e todo o texto que excede .ticket é substituído por reticências.

Navegação de Casos Especiais e Compatibilidade entre Navegadores

Ao trabalhar com text-overflow: ellipsis, sempre preste atenção à compatibilidade entre navegadores, utilizando recursos como Can I use.... Esteja ciente das diferenças no comportamento da propriedade direction: rtl; para idiomas que são lidos da direita para a esquerda.

Acessibilidade e Indexação em Motores de Busca

Não se esqueça da acessibilidade — embora uma reticência pareça visualmente atraente, leitores de tela precisam ter acesso ao texto completo, e motores de busca só indexam o que é visível. Portanto, palavras-chave e informações devem sempre ser acessíveis.

Métodos Progressivos de Truncamento de Texto

Ao criar layouts complexos, use pseudo-elementos CSS ou flexbox. Pseudo-elementos podem adicionar elementos visuais adicionais ao texto truncado, enquanto flexbox simplifica a gestão de texto excedente em contêineres.

Recursos Úteis

1. Propriedade CSS text-overflow - W3Schools — Um mergulho profundo nos princípios básicos e exemplos.
2. Truncando uma string com reticências | CSS-Tricks — Aplicação prática em exemplos reais.
3. overflow - CSS: Folhas de Estilo em Cascata | MDN — Análise detalhada da propriedade overflow.
4. Lidando com palavras longas e URLs (Quebra de linha, hifenização, etc.) | CSS-Tricks — Como evitar a interrupção do layout.
5. Guia Completo de Flexbox | CSS-Tricks — Gerenciando conteúdo com flexbox.
6. Can I use... Tabelas de suporte para HTML5, CSS3, etc. — Verificando a compatibilidade entre navegadores para text-overflow.
7. CSS Puro para Truncamento em Múltiplas Linhas com Reticências – Hacking UI — Truncamento de texto em múltiplas linhas sem usar JavaScript.

Video

Navigation