dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
CSS Toate proprietățile CSS

overflow-wrap, word-break și hyphens în CSS

Culori, fundaluri și text CSS3+

Controlează ruperea cuvintelor foarte lungi (linkuri, coduri) ca să nu iasă din cutie, plus despărțirea automată în silabe.

Sintaxă CSS 
overflow-wrap: break-word;  /* rupe doar cuvintele care nu încap */
overflow-wrap: anywhere;
word-break: break-all;      /* rupe oriunde */
hyphens: auto;              /* despărțire în silabe, cu cratimă */

Ce face overflow-wrap, word-break și hyphens

Un cuvânt lung fără spații (un URL, un IBAN, un hashtag) nu poate fi împărțit în mod normal și iese din containerul îngust. overflow-wrap: break-word rupe acel cuvânt doar dacă nu încape pe un rând întreg.

overflow-wrap: anywhere face același lucru, dar ține cont de punctele de rupere și când calculează lățimea minimă a elementului; ajută în celule de tabel și elemente flex sau grid care altfel s-ar lăți. word-break: break-all rupe orice cuvânt la marginea rândului, chiar și pe cele scurte, deci textul normal arată mai rău.

hyphens: auto desparte cuvintele în silabe și adaugă cratima, dar doar dacă pagina are atributul lang și browserul are dicționar de despărțire pentru acea limbă. Limba română nu apare în lista limbilor documentate de MDN pentru hyphens: auto, așa că nu te baza pe ea; pentru cuvinte anume poți pune manual ­ (cratimă opțională) în HTML.

Valori uzuale

Valoare Descriere
overflow-wrap: normal Cuvintele lungi nu se rup (implicit).
overflow-wrap: break-word Rupe un cuvânt doar dacă nu încape singur pe rând.
overflow-wrap: anywhere Ca break-word, dar influențează și lățimea minimă (min-content) a elementului.
word-break: break-all Permite ruperea între oricare două litere.
word-break: keep-all Nu rupe în interiorul cuvintelor (relevant pentru chineză, japoneză, coreeană).
hyphens: none | manual | auto Fără cratime / doar la ­ (implicit) / automat, după dicționarul limbii.

Exemple

Exemplul 1: Link lung într-un comentariu pe telefon

Fără regulă, URL-ul lărgește pagina și apare derularea orizontală.

.comentariu {
  overflow-wrap: anywhere;
}
/* Text: Vezi detalii la https://www.exemplu.ro/evenimente/iasi/2026/concert-de-craciun-in-piata-unirii */

Efect vizual în browser

Pe un ecran de 360px, URL-ul se rupe pe două sau trei rânduri în interiorul casetei comentariului; pagina nu mai derulează pe orizontală.

Exemplul 2: Cuvânt lung despărțit controlat cu ­

Pentru un titlu îngust îi arăți browserului unde poate despărți cuvântul.

.titlu-card {
  hyphens: manual;
  width: 140px;
}
/* <h3 class="titlu-card">Electro&shy;casnice reduse</h3> */

Efect vizual în browser

Pe cardul îngust apare „Electro-” pe primul rând și „casnice reduse” dedesubt; pe un card lat cuvântul rămâne întreg, fără cratimă.

Greșeli frecvente

  • Folosirea word-break: break-all pe tot site-ul; și cuvintele obișnuite sunt rupte urât la capăt de rând.
  • Așteptarea ca hyphens: auto să funcționeze fără atributul lang pe <html> sau pentru limbi fără dicționar în browser.
  • Folosirea valorii învechite word-break: break-word; scrie în locul ei overflow-wrap: anywhere.

Comenzi înrudite