Tag HTML <wbr>
Il tag HTML <wbr> segna un'opportunità di interruzione di parola: un punto dove una parola lunga o URL può andare a capo se necessario.
Il tag HTML <wbr> (Word BReak opportunity, opportunità di interruzione di parola) segna un punto all'interno del testo dove il browser può inserire un'interruzione di riga se la riga altrimenti andrebbe in overflow. Non forza un'interruzione — aggiunge soltanto l'opzione di interrompere in quel punto. Se la parola entra nella riga, <wbr> non visualizza nulla.
Questo è diverso dal tag <br>, che forza sempre un'interruzione di riga. Con <wbr>, il browser interrompe in quel punto solo quando è necessario andare a capo con una stringa lunga e non divisibile, come una URL, un percorso di file o una parola molto lunga.
Il tag <wbr> è uno degli elementi HTML5.
Perché usare <wbr>?
Per impostazione predefinita, i browser vanno a capo in corrispondenza di spazi e trattini. Una stringa lunga senza spazi — una URL, un percorso di file, un hash o una parola composta molto lunga — non ha un punto di interruzione naturale, quindi il browser fa una delle due cose indesiderate seguenti:
- spinge la stringa oltre il bordo del suo contenitore, causando un overflow orizzontale, oppure
- va a capo la stringa in un punto scomodo e difficile da leggere.
Inserire <wbr> in punti appropriati indica al browser "qui c'è un posto sicuro dove interrompere questa stringa se si finisce lo spazio." Le interruzioni appaiono solo quando necessario, quindi su uno schermo largo la stringa rimane intatta.
Andare a capo con una URL lunga — l'uso più comune
Una URL lunga senza spazi è il caso classico per <wbr>. Aggiungere un <wbr> dopo le barre o i punti consente al link di andare a capo ordinatamente all'interno di una colonna stretta invece di andare in overflow:
<p style="width: 220px; border: 1px solid #ccc; padding: 8px;">
Read it here:
https://<wbr>www.w3docs.com<wbr>/learn-html<wbr>/html-wbr-tag
</p>Su uno schermo largo la URL rimane su una sola riga, ma all'interno del contenitore da 220px sopra si interrompe solo nei punti <wbr> che hai consentito.
<wbr> per una parola lunga
<wbr> aiuta anche con una singola parola estremamente lunga. Confronta un paragrafo con e senza opportunità di interruzione:
<p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
<p>This is the longest word you can ever meet in the English language pneumono<wbr>ultra<wbr>micro<wbr>scopic<wbr>silico<wbr>volcano<wbr>coniosis</p>Il primo paragrafo potrebbe andare in overflow nel suo contenitore; il secondo può andare a capo ordinatamente tra le sillabe quando lo spazio si esaurisce.
<wbr> vs. ­ vs. CSS
<wbr> è uno dei diversi modi per controllare come va a capo il testo. Ognuno si comporta in modo diverso, quindi scegli lo strumento giusto:
| Tecnica | Cosa fa | Mostra un trattino? |
|---|---|---|
<wbr> | Segna un'opportunità di interruzione nel markup. Interrompe solo se necessario. | No |
­ (trattino morbido) | Segna un'opportunità di interruzione. Interrompe solo se necessario. | Sì — appare un trattino al punto di interruzione |
CSS overflow-wrap: break-word | Consente al browser di interrompere una parola lunga in qualsiasi punto per evitare overflow. | No |
CSS word-break: break-all | Forza le interruzioni tra qualsiasi coppia di caratteri. | No |
Quando scegliere cosa:
- Usa
<wbr>quando tu conosci i punti di interruzione giusti (dopo ogni/in una URL, tra le sillabe) e vuoi che non appaia alcun trattino. - Usa
­quando vuoi lo stesso controllo ma con un trattino al punto di interruzione — ideale per sillabazione di parole reali. - Usa CSS
overflow-wrap/word-breakquando non puoi (o non vuoi) modificare manualmente ogni stringa e hai solo bisogno di bloccare l'overflow su tutto il sito. Queste sono generalmente la scelta migliore per i contenuti generati dagli utenti dove non controlli il testo.
Un trattino al punto di interruzione di riga non viene introdotto dall'elemento <wbr>. Se vuoi che appaia un trattino solo alla fine di una riga a capo, usa invece ­ (l'entità carattere del trattino morbido).
Esempio con percorso di file
Qui <wbr> consente a un percorso di file Windows di andare a capo dopo ogni segmento con barra rovesciata:
<p>You can find the file by going
C:\user\docs\Letter.txt
</p>Senza opportunità di interruzione l'intero percorso scende alla riga successiva. L'aggiunta di elementi <wbr> consente di andare a capo ordinatamente:
<p>You can find the file by going C:<wbr>\user<wbr>\docs<wbr>\Files<wbr>\Letter.txt</p>Sintassi
Il tag <wbr> è un elemento vuoto, quindi non ha un tag di chiusura. In XHTML devi auto-chiuderlo come <wbr/>.
Esempio completo del tag HTML <wbr>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Example of a long string of text without wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
<p>Example of a long string of text with wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumono<wbr />ultra<wbr />micro<wbr />scopic<wbr />silico<wbr />volcano<wbr />coniosis</p>
</body>
</html>Risultato
Attributi
L'elemento <wbr> non ha attributi specifici dell'elemento. Supporta solo gli attributi globali e gli attributi degli eventi.