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:
<div id="elem">
this is supersupersuperlong text
</div>
#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):
<div id="elem">
this is super<wbr>super<wbr>super<wbr>long text
</div>
#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:
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Veja também
-
a tag
br,
,
que faz uma quebra de linha -
a propriedade
hyphens,
que define a hifenização de palavras -
as propriedades
word-breakeoverflow-wrap,
que permitem quebrar letras de uma palavra longa -
a propriedade
overflow,
que recorta partes do conteúdo que ultrapassam os limites do bloco
