Tag HTML <wbr>
A tag HTML <wbr> marca uma oportunidade de quebra de palavra: um ponto onde uma palavra longa ou URL pode ser quebrada se necessário. Saiba mais sobre sua sintaxe e exemplos.
A tag HTML <wbr> (oportunidade de quebra de palavra, do inglês Word BReak opportunity) marca um ponto dentro do texto onde o navegador pode inserir uma quebra de linha caso a linha ultrapasse os limites do contêiner. Ela não força uma quebra — apenas adiciona a opção de quebrar ali. Se a palavra couber na linha, <wbr> não renderiza nada.
Isso é diferente da tag <br>, que sempre força uma quebra de linha. Com <wbr>, o navegador quebra naquele ponto somente quando precisar fazer a quebra de uma string longa e inquebrável, como uma URL, um caminho de arquivo ou uma palavra muito longa.
A tag <wbr> é um dos elementos HTML5.
Por que usar <wbr>?
Por padrão, os navegadores quebram linhas em espaços e hifens. Uma string longa sem espaços — uma URL, um caminho de arquivo, um hash ou uma palavra longa inventada — não tem ponto de quebra natural, então o navegador faz uma das duas coisas indesejadas:
- empurra a string além da borda do contêiner, causando estouro horizontal, ou
- quebra a string em um lugar estranho e difícil de ler.
Colocar <wbr> em pontos adequados informa ao navegador: "aqui está um local seguro para quebrar esta string se você ficar sem espaço." As quebras só aparecem quando necessário, então em uma tela larga a string permanece intacta.
Quebrando uma URL longa — o uso mais comum
Uma URL longa sem espaços é o caso clássico para <wbr>. Adicione um <wbr> após barras ou pontos para que o link possa quebrar de forma organizada dentro de uma coluna estreita em vez de transbordar:
<p style="width: 220px; border: 1px solid #ccc; padding: 8px;">
Read it here:
https://<wbr>www.w3docs.com<wbr>/learn-html<wbr>/html-wbr-tag
</p>Em uma tela larga, a URL permanece em uma linha, mas dentro do contêiner de 220px acima ela quebra apenas nos pontos <wbr> que você permitiu.
<wbr> para uma palavra longa
<wbr> também ajuda com uma palavra extremamente longa. Compare um parágrafo com e sem oportunidades de quebra:
<p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
<p>This is the longest word you can ever meet in the English language pneumono<wbr>ultra<wbr>micro<wbr>scopic<wbr>silico<wbr>volcano<wbr>coniosis</p>O primeiro parágrafo pode transbordar seu contêiner; o segundo pode quebrar de forma limpa entre sílabas quando o espaço acabar.
<wbr> vs. ­ vs. CSS
<wbr> é uma das várias formas de controlar como o texto quebra. Cada uma se comporta de forma diferente, então escolha a ferramenta certa:
| Técnica | O que faz | Exibe um hífen? |
|---|---|---|
<wbr> | Marca uma oportunidade de quebra no markup. Quebra apenas se necessário. | Não |
­ (hífen suave) | Marca uma oportunidade de quebra. Quebra apenas se necessário. | Sim — um hífen aparece na quebra |
CSS overflow-wrap: break-word | Permite ao navegador quebrar uma palavra longa em qualquer lugar para evitar transbordamento. | Não |
CSS word-break: break-all | Força quebras entre quaisquer dois caracteres. | Não |
Quando escolher cada um:
- Use
<wbr>quando você conhece os pontos de quebra corretos (após cada/em uma URL, entre sílabas) e quer sem hífen exibido. - Use
­quando quiser o mesmo controle, mas com um hífen na quebra — ideal para hifenizar palavras reais. - Use CSS
overflow-wrap/word-breakquando não puder (ou não quiser) editar cada string manualmente e só precisar parar o transbordamento em todo o site. Geralmente são a melhor escolha para conteúdo gerado pelo usuário, onde você não controla o texto.
Um hífen no ponto de quebra de linha não é introduzido pelo elemento <wbr>. Se você quiser que um hífen apareça apenas no final de uma linha quebrada, use ­ (a entidade de caractere de hífen suave) em vez disso.
Exemplo com caminho de arquivo
Aqui o <wbr> permite que um caminho de arquivo do Windows quebre após cada segmento de barra invertida:
<p>You can find the file by going
C:\user\docs\Letter.txt
</p>Sem oportunidades de quebra, todo o caminho cai para a próxima linha. Adicionando elementos <wbr>, ele pode quebrar de forma limpa:
<p>You can find the file by going C:<wbr>\user<wbr>\docs<wbr>\Files<wbr>\Letter.txt</p>Sintaxe
A tag <wbr> é um elemento vazio, portanto não tem tag de fechamento. Em XHTML você deve fechá-la automaticamente como <wbr/>.
Exemplo completo da tag HTML <wbr>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Example of a long string of text without wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
<p>Example of a long string of text with wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumono<wbr />ultra<wbr />micro<wbr />scopic<wbr />silico<wbr />volcano<wbr />coniosis</p>
</body>
</html>Resultado
Atributos
O elemento <wbr> não possui atributos específicos. Ele suporta apenas os atributos globais e os atributos de evento.