Proprietatea overflow-wrap

Proprietatea overflow-wrap permite transferarea literelor unui cuvânt lung pe o linie nouă, dacă acest cuvânt nu încape în lățimea containerului.

Sintaxă

cssselector {
  overflow-wrap: break-word | normal;
}

Valori

Valoare	Descriere
`break-word`	Forțează cuvintele lungi să fie transferate pe o linie nouă, dacă acest cuvânt nu încape în container. În acest caz, cuvântul va începe pe o linie nouă.
`normal`	Comportamentul standard: dacă un cuvânt lung nu încape în lățimea containerului - acesta va ieși pur și simplu dincolo de granița sa (în acest caz va începe pe o linie nouă).

Valoarea implicită: normal.

Exemplu . Valoarea normal

În acest exemplu, un cuvânt foarte lung nu va încăpea în container și va ieși dincolo de granițele acestuia (în acest caz va începe pe o linie nouă):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  word-wrap: normal;
  overflow-wrap: normal;
  border: 1px solid red;
  width: 200px;
}

Результат:

Exemplu . Valoarea break-word

Iar acum acele litere care nu încăpeau, vor fi pur și simplu transferate pe linia următoare (în acest caz cuvântul lung va începe oricum pe o linie nouă):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow-wrap: break-word;
  border: 1px solid red;
  width: 200px;
}

Результат:

Vedeți și

proprietatea word-break,
care permite, de asemenea, transferarea literelor unui cuvânt lung pe o linie nouă
proprietatea word-wrap,
care este denumirea învechită a proprietății overflow-wrap
proprietatea hyphens,
care activează transferul cuvintelor pe silabe
tag-ul wbr,
care implementează transferuri soft prin mijloace HTML
tag-ul br,
cu ajutorul căruia puteți forța în mod obligatoriu transferul textului pe o linie nouă