<wbr> în HTML

www.exemplu.ro/<wbr>pagini/<wbr>foarte/<wbr>lungi

Ce face <wbr>

<wbr> (word break opportunity) este un element gol, fără tag de închidere. Nu afișează nimic. Spune doar browserului: „aici poți trece pe rândul următor, dacă e nevoie”.

Este util pentru adrese URL, căi de fișiere sau cuvinte compuse lungi care altfel ar ieși din container pe ecranele înguste. Dacă textul încape, rândul nu se rupe deloc. Spre deosebire de caracterul ­ (cratimă opțională), <wbr> nu adaugă nicio cratimă la ruptură.

Exemple

Exemplul 1: Adresă URL lungă pe telefon

Pe un ecran îngust, adresa se rupe după bare oblice, nu iese din pagină.

<p>Descarcă orarul de la
  www.liceul-iasi.ro/<wbr>documente/<wbr>orar/<wbr>clasa-a-IX-a.pdf</p>

Ce afișează browserul

Pe ecran lat: Descarcă orarul de la www.liceul-iasi.ro/documente/orar/clasa-a-IX-a.pdf
Pe ecran îngust:
Descarcă orarul de la www.liceul-iasi.ro/
documente/orar/
clasa-a-IX-a.pdf

Exemplul 2: Cale de fișier într-un tabel îngust

Ruperea apare doar în punctele marcate, deci numele folderelor rămân întregi.

<td>C:\Utilizatori\<wbr>Ana\<wbr>Documente\<wbr>Facturi-2026</td>

Ce afișează browserul

C:\Utilizatori\
Ana\Documente\
Facturi-2026
(rândul se rupe doar după bare, când coloana este îngustă)

Greșeli frecvente

• Scrierea unui tag de închidere </wbr>: elementul este gol (void), la fel ca <br>.
• Confuzia cu <br>: <br> rupe rândul mereu, <wbr> doar dacă textul nu încape.
• Folosirea lui pe text obișnuit, în loc de CSS: pentru blocuri întregi, overflow-wrap: anywhere sau hyphens: auto rezolvă problema fără marcaj manual.

Comenzi înrudite

• <br> și <hr>: Elemente vide: br forțează o linie nouă în text, iar hr creează o linie orizontală de separare tematică.
• <code> și <pre>: Afișează fragmente de cod: code pentru fragmente scurte în text și pre pentru blocuri cu spații și linii păstrate.
• <span>: Container generic de tip inline, utilizat pentru a grupa o porțiune de text și a-i aplica stiluri CSS sau acțiuni JS.