23.03.2025

Por Que word-wrap: break-word Não Funciona no Chrome e Firefox

Resposta Rápida

Para o funcionamento correto da propriedade word-wrap: break-word;, ela deve ser aplicada a um elemento de bloco com uma largura definida. Aqui está um exemplo de sua aplicação:

<div style="width: 100px; word-wrap: break-word;">
  Garantindo que o texto quebre dentro da largura estabelecida usando word-wrap
</div>

Verifique o CSS do seu elemento pai para qualquer configuração desnecessária que possa interferir na quebra de texto. Além disso, certifique-se de que seu container não permite que o texto transborde suas bordas.

Garantindo Compatibilidade Entre Navegadores

Para quebrar palavras no Firefox e Chrome, adicione a propriedade display: inline-block;. Em navegadores Webkit, como o Safari, utilize word-break: break-word;. Certifique-se de que propriedades como white-space: nowrap; não contradizem suas configurações de quebra.

Dicas para Cenários Complexos

Se word-wrap: break-word; não produzir o efeito desejado, use word-break: break-all; para quebras de palavras mais perceptíveis. Combinar propriedades como overflow-wrap: break-word; e hyphens: auto; ajudará a aplicar hífens corretamente durante a quebra.

Erros a Evitar

Tenha cuidado com elementos de layout fixo, como tabelas com larguras de célula definidas. Evite propriedades obsoletas e específicas de navegador, como -ms-word-break: break-all;, a menos que você pretenda dar suporte a versões específicas de navegadores.

Visualização

Vamos considerar por que, às vezes, word-wrap: break-word; não funciona:

Imagine um trem (🚂) feito de palavras que precisa passar por um túnel (🚇):

Sem word-wrap: break-word;

🚂 == "Superlongwordorname" == 🚇

Este 🚂 é grande demais para o túnel.

Com word-wrap: break-word;

🚂 == "Super...name" ➡️ 
 🚃 == "..long...ord" 🏞️ ==
 🚃 == "...word...e" 🚇

No segundo exemplo, as palavras se quebram em partes como vagões do trem.

Importante: O tamanho dos vagões de palavras (🚃) deve caber dentro do tamanho do túnel (🚇) para uma passagem bem-sucedida.

Definindo Largura (Ajuste da Largura)

Defina a largura do elemento que contém o texto. Sem uma largura especificamente definida, o navegador não saberá onde quebrar o texto. O método text-align: justify; ajudará a gerenciar a disposição do texto.

Exemplos de Direção de Estilo

• Certas propriedades de alta prioridade podem sobrepor as regras locais de word-wrap.
• Utilize ferramentas de desenvolvedor para verificar os estilos ativos caso o texto ainda transborde.
• Tenha cuidado com estruturas de código complexas quando elementos inline estiverem dentro de outras estruturas inline.
• Verifique a declaração do doctype para o funcionamento estável da propriedade e para evitar problemas de compatibilidade.

Técnicas Especiais de Solução de Problemas

• Limitando o comprimento de URL: word-break: break-all; será útil aqui.
• Evitando sobreposição de texto: se o texto se sobrepuser a outros elementos, verifique as margens ou o uso de posicionamento absoluto.
• Considerando as necessidades de navegadores mais antigos: eles podem exigir prefixos de fornecedor e regras especiais.

Recursos Úteis

1. word-break: MDN - Uma descrição detalhada da propriedade CSS word-break.
2. word-break: CSS-Tricks - Uma visão geral dos problemas e peculiaridades da propriedade word-break.
3. Tabelas de Suporte - Informações sobre o suporte da propriedade CSS word-break em diversos navegadores.
4. Tutorial sobre word-wrap - Um guia simples e claro sobre word-wrap em CSS.
5. Perguntas sobre word-wrap - Discussões e soluções relacionadas a word-wrap.
6. diferenças entre word-break e word-wrap - Diferenças entre word-break e word-wrap.

Video

Navigation