05.04.2025

Prevenção de Overflow de Texto em CSS: Soluções

Resposta Rápida

Para evitar que o texto transborde de um elemento, aplique a propriedade overflow-wrap: break-word;. Essa propriedade quebra palavras longas para uma nova linha, evitando que elas ultrapassem os limites. Para elementos de uma única linha onde o texto é truncado com uma elipse, use uma combinação de white-space: nowrap;, overflow: hidden;, e text-overflow: ellipsis;.

Aqui está um exemplo de implementação:

.wrap-text {
  overflow-wrap: break-word; /* Quebrar texto */
}

.ellipsis {
  white-space: nowrap;  /* "Pare, palavras!" */
  overflow: hidden;  /* "Esconder o excesso" */
  text-overflow: ellipsis; /* Terminar com elipse */
}

Assim, .wrap-text ajudará a acomodar grandes volumes de texto, enquanto .ellipsis fornecerá uma truncagem elegante do texto com uma elipse no final.

Propriedades CSS – Seu Arsenal

Você também tem outros métodos à sua disposição para gerenciar texto em uma página da web:

• A propriedade white-space: pre-wrap; manterá os espaços e respeitará os pontos de quebra naturais no texto.
• word-break: break-word; quebrará palavras longas para evitar que elas transbordem os limites do elemento.
• Usar Flexbox e Grid pode proporcionar capacidades de alinhamento e distribuição flexíveis para o texto.

Ajustando Espaços – Adaptando Tamanhos de Container

Pode haver situações em que seu texto tem dificuldades em um container estreito ou, inversamente, o container precisa de flexibilidade:

• Ajuste os tamanhos de largura e altura para se adequar ao conteúdo.
• Defina min-width e max-width para estabelecer limites com a possibilidade de extensão.

Responsividade – A Mágica das Media Queries

A página deve ser renderizada corretamente em diferentes dispositivos com tamanhos de tela variados, e para isso, as media queries são usadas para adaptar as mudanças com base na largura da tela:

@media (max-width: 600px) {
  .container {
    font-size: menor; /* quando menos é mais */
    word-wrap: break-word; /* quebrar palavras para mantê-las dentro */
  }
}

Você também pode usar a função CSS clamp() para escalonamento flexível do tamanho da fonte.

Visualização

Vamos imaginar a estrutura do CSS:

Container (📦) / elemento HTML: área para conteúdo.
Texto (📝): conteúdo que você coloca dentro do container.

Controle para overflow com overflow: hidden; e text-overflow: ellipsis;:

.container {
  overflow: hidden;      /* Seu container ignora tudo que tenta olhar para fora */
  text-overflow: ellipsis; /* "..." aparece quando o texto tenta escapar dos limites */
}

O resultado fica assim:

Antes: 📦📝📝📝📝📝📝📝📝📝📝📝📝📝
Depois: 📦📝📝📝📝...

Assim, seu texto sempre permanecerá dentro do container.

Métodos Alternativos para Lidar com Overflow

O CSS oferece muitas outras opções:

• Com uma rápida olhada, flex-grow e flex-shrink para flexbox podem muitas vezes ajudar a lidar com overflow.
• As propriedades grid-template-columns e grid-template-rows no CSS Grid ajudam a definir layouts de forma precisa e controlar o conteúdo.
• Explore unidades de medida relativas (como em, rem, vw/vh) para criar layouts flexíveis.

Fique Atento

Tenha cuidado com os seguintes pontos:

• word-break: break-all; pode ser muito agressivo em quebrar palavras, dificultando a leitura.
• Ao usar métodos de controle de overflow, pode haver problemas de acessibilidade se informações importantes estiverem escondidas.
• Lembre-se de que os navegadores podem suportar propriedades CSS de maneira diferente, então é sempre sábio ter um plano de contingência.

Recursos Úteis

1. text-overflow - CSS: Folhas de Estilo em Cascata | MDN
2. Lidando com Palavras Longas e URLs | CSS-Tricks
3. Flexbox e Texto Truncado | CSS-Tricks
4. clamp() - CSS: Folhas de Estilo em Cascata | MDN
5. Um Guia Completo para CSS Grid | CSS-Tricks

Video

Navigation