Tagul wbr
Tagul wbr indică locul în care browserul
poate face un transfer de linie dacă este necesar
(dacă textul nu încape în lățimea elementului).
Astfel de transferuri se numesc moi.
Nu necesită tag de închidere.
La transferul cuvântului prin tagul wbr simbolul
de transfer "-" nu este adăugat. Dacă
acesta vă este necesar - utilizați simbolul de transfer moale
­ (punct și virgulă
la sfârșit este obligatorie, aceasta nu este o greșeală de tipar).
Transferul moale ­ indică
browserului locul unde poate face un transfer
al cuvântului (dacă este necesar), punând
în acest caz simbolul de transfer "-".
Transferurile moi ­ nu vor
funcționa, dacă proprietatea hyphens
este setată la valoarea none (iar transferurile
wbr vor funcționa).
Exemplu . Text fără transferuri
Să ne uităm la un eșantion de text, în care există cuvinte lungi care ies în afara limitei blocului. Blocului îi vom da o mică lățime astfel încât un cuvânt mare să nu încape în el:
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Exemplu . Tagul wbr
Aici, să adăugăm tagul wbr în
locurile unde recomandăm browserului să facă
un transfer al cuvântului dacă este necesar (acordați
atenție faptului că browserul va face transferuri
nu peste tot unde am indicat):
<div id="elem">
this is super<wbr>super<wbr>super<wbr>long text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Exemplu . Simbolul ­
Să încercăm în loc de tagul wbr
să punem simbolul ­. În locurile
de transfer vor fi afișate cratime:
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Vedeți și
-
tagul
br,
,
care face transfer pe linie nouă -
proprietatea
hyphens,
care setează transferuri reale de cuvinte -
proprietățile
word-breakșioverflow-wrap,
care permit transferul literelor unui cuvânt lung -
proprietatea
overflow,
care taie părțile care ies în afara limitei blocului
