Tag wbr

A tag wbr indica um local onde o navegador pode fazer uma quebra de linha, se necessário (se o texto não couber na largura do elemento). Tais quebras são chamadas de suaves.

Não requer uma tag de fechamento.

Ao quebrar uma palavra através da tag wbr, o símbolo de hífen "-" não é adicionado. Se você precisar dele - use o símbolo de hífen suave ­ (o ponto e vírgula no final é obrigatório, não é um erro de digitação).

O hífen suave ­ indica ao navegador um local onde ele pode quebrar a palavra (se necessário), inserindo o símbolo de hífen "-".

Os hífens suaves ­ não funcionarão se a propriedade hyphens estiver definida como none (mas as quebras wbr funcionarão).

Exemplo . Texto sem quebras

Vamos dar uma olhada em um texto de exemplo que contém palavras longas e que ultrapassam os limites do bloco. Vamos definir uma largura pequena para o bloco, de modo que uma palavra longa não caiba nele:

html<div id="elem">
  this is supersupersuperlong text
</div>

css#elem {
  width: 200px;
  border: 1px solid black;
}

Результат:

Exemplo . A tag wbr

Aqui, vamos adicionar a tag wbr em locais onde recomendamos que o navegador faça a quebra de palavra, se necessário (observe que o navegador fará as quebras nem em todos os lugares que indicamos):

html<div id="elem">
  this is super<wbr>super<wbr>super<wbr>long text
</div>

css#elem {
  width: 200px;
  border: 1px solid black;
}

Результат:

Exemplo . O símbolo ­

Vamos tentar usar o símbolo ­ em vez da tag wbr. Nos locais de quebra, serão exibidos hífens:

html<div id="elem">
  this is super­super­super­long text
</div>

css#elem {
  width: 200px;
  border: 1px solid black;
}

Результат:

Veja também