<wbr>: O Elemento WBR
Última atualização: 2026-10-13
<wbr>O Elemento WBR
Marca uma oportunidade opcional de quebra de palavra: o navegador quebra aqui apenas se necessário, sem forçar quebra ou adicionar espaço. Ótimo para palavras longas, URLs ou código.
| Categoria | Conteúdo de Texto |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Auto-fechante — nenhuma tag de fechamento necessária |
| Status | Padrão |
📝 Sintaxe
palavraInglesaMuitoLonga<wbr>podeQuebrarAqui▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <wbr> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： Diferente de <br>, wbr só sugere uma quebra quando a linha é longa demais — sem quebra forçada caso contrário.
❓ Perguntas Frequentes
QPara que serve wbr?
A
<wbr> (word break opportunity) marca «aqui é permitido quebrar»: insira-o em URLs longas, palavras longas e cadeias de código; o navegador só quebra ali quando falta espaço, mantendo uma linha só quando há espaço. Ele próprio não produz nenhum caractere visível.QQual é a diferença entre wbr e o word-break do CSS?
A
<wbr> controla com precisão «onde se pode quebrar» dentro do conteúdo; word-break/overflow-wrap no CSS é regra global (pode quebrar em qualquer ponto). Para uma cadeia longa isolada, wbr é mais preciso; para evitar transbordo num texto inteiro, CSS é mais prático.QQual é a diferença entre wbr e o soft hyphen?
A
­ exibe um hífen ao quebrar; <wbr> não exibe símbolo algum. Conteúdos que não devem receber hífen — URLs, identificadores de código — usam wbr; quebra de palavras em linguagem natural pode usar shy.🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
