Znacznik wbr
Znacznik wbr wskazuje miejsce, w którym przeglądarka
może dokonać przełamania linii w razie potrzeby
(jeśli tekst nie mieści się w szerokości elementu).
Takie przełamania nazywane są miękkimi.
Nie wymaga tagu zamykającego.
Podczas przenoszenia słowa za pomocą znacznika wbr znak
przeniesienia "-" nie jest dodawany. Jeśli
jest potrzebny - użyj symbolu miękkiego
przeniesienia ­ (średnik
na końcu jest obowiązkowy, to nie literówka).
Miękki myślnik ­ wskazuje
przeglądarce miejsce, w którym może dokonać przeniesienia
słowa (w razie potrzeby), stawiając
przy tym znak przeniesienia "-".
Miękkie myślniki ­ nie
będą działać, jeśli właściwość hyphens
jest ustawiona na wartość none (a przełamania
wbr będą działać).
Przykład . Tekst bez przeniesień
Spójrzmy na przykładowy tekst, w którym znajdują się długie słowa wystające poza granicę bloku. Ustawmy blokowi małą szerokość, tak aby długie słowo się w nim nie mieściło:
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Przykład . Znacznik wbr
Tutaj dodajmy znacznik wbr w
miejscach, w których zalecamy przeglądarce dokonanie
przeniesienia słowa w razie potrzeby (zwróć
uwagę na to, że przeglądarka dokona przeniesień
nie wszędzie, gdzie wskazaliśmy):
<div id="elem">
this is super<wbr>super<wbr>super<wbr>long text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Przykład . Symbol ­
Spróbujmy zamiast znacznika wbr
umieścić symbol ­. W miejscach
przeniesienia będą wyświetlane się myślniki:
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Zobacz też
-
znacznik
br,
,
który dokonuje przeniesienia do nowej linii -
właściwość
hyphens,
która ustawia prawdziwe przenoszenie słów -
właściwości
word-breakioverflow-wrap,
które pozwalają przenieść litery długiego słowa -
właściwość
overflow,
która przycina części wystające poza granicę bloku
