Propriedade word-break
Última atualização: 2026-09-13
word-break Propriedade word-break
A propriedade word-break do CSS controla como as palavras quebram na borda do contêiner, resolvendo principalmente o problema de palavras longas ou URLs transbordarem o contêiner. Ela decide se quebras são permitidas dentro das palavras e como o texto CJK é envolvido. É especialmente útil para longas sequências geradas por usuários.
| Categoria | |
|---|---|
| Valor Inicial | normal |
| Herdado | Sim |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
word-break: normal | break-all | keep-all | break-word;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
normal | break-all | keep-all | break-word | Palavra-chave | Regras de quebra de palavra |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| word-break | ✓ v43 | ✓ v12 | ✓ v15 | ✓ v9 | ✓ v30 |
| Suportado em todos os principais navegadores | |||||
Dica： break-all permite quebras entre quaisquer caracteres, bom para URLs e código; keep-all mantém as palavras CJK intactas e proíbe a quebra entre caracteres.
Importante： O valor break-word foi movido para a propriedade overflow-wrap; ainda funciona em word-break, mas é sintaxe legada — prefira overflow-wrap: break-word.
❓ Perguntas Frequentes
QQual é a diferença entre word-break e overflow-wrap?
AO word-break controla as regras para quebrar dentro das palavras, enquanto o overflow-wrap (antigo word-wrap) controla se uma palavra longa e indivisível pode ser quebrada. Eles são frequentemente combinados: word-break: break-all força quebras, enquanto overflow-wrap: break-word mantém as palavras intactas quando possível.
QQual valor de word-break deve ser usado para texto chinês no CSS?
AO padrão normal funciona para o chinês, já que os hanzi já quebram entre caracteres. Use keep-all quando não quiser que palavras em inglês em texto misto sejam divididas, e break-all apenas para URLs ou palavras longas que transbordam o contêiner.
QQual é a diferença entre break-all e break-word no CSS?
Abreak-all força uma quebra de linha entre quaisquer dois caracteres, cortando palavras na borda do contêiner; break-word (agora parte do overflow-wrap) mantém as palavras inteiras sempre que possível e só quebra dentro de uma palavra quando uma única palavra não cabe. O primeiro é agressivo, o segundo mais amigável.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Propriedade overflow-wrap
Controla a quebra de palavras longas.
Propriedade white-space
Controla o tratamento de espaços em branco e a quebra.
