Tag wbr
Il tag wbr indica il punto in cui il browser
può effettuare un'interruzione di riga se necessario
(se il testo non rientra nella larghezza dell'elemento).
Tali interruzioni sono chiamate morbide.
Non richiede un tag di chiusura.
Quando si spezza una parola tramite il tag wbr, il simbolo
di troncamento "-" non viene aggiunto. Se
ne avete bisogno - utilizzate il simbolo di troncamento morbido
­ (il punto e virgola
alla fine è obbligatorio, non è un refuso).
Il troncamento morbido ­ indica
al browser il punto in cui può effettuare un'interruzione
di parola (se necessario), inserendo
il simbolo di troncamento "-".
I troncamenti morbidi ­ non
funzioneranno se la proprietà hyphens
è impostata sul valore none (mentre le interruzioni
wbr funzioneranno).
Esempio . Testo senza interruzioni
Diamo un'occhiata a un campione di testo in cui ci sono parole lunghe che fuoriescono dai confini del blocco. Assegniamo al blocco una piccola larghezza in modo che una parola lunga non ci stia dentro:
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Esempio . Tag wbr
Qui, invece, aggiungiamo il tag wbr nei
punti in cui consigliamo al browser di effettuare
un'interruzione di parola se necessario (fate
attenzione al fatto che il browser effettuerà le interruzioni
non ovunque le abbiamo indicate):
<div id="elem">
this is super<wbr>super<wbr>super<wbr>long text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Esempio . Simbolo ­
Proviamo a mettere il simbolo ­
al posto del tag wbr. Nei punti di
interruzione verranno visualizzati i trattini:
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Vedi anche
-
tag
br,
,
che effettua un'interruzione di riga -
proprietà
hyphens,
che imposta le vere interruzioni di parole -
proprietà
word-breakeoverflow-wrap,
che consentono di interrompere le lettere di una parola lunga -
proprietà
overflow,
che tronca le parti che fuoriescono dai confini del blocco
