Proprietatea word-break

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

Sintaxă

cssselector {
  word-break: break-all | keep-all | normal;
}

Valoare	Descriere
`break-all`	Forțează cuvintele lungi să se transfere pe o linie nouă, dacă acel cuvânt nu încape în container.
`keep-all`	Pentru transferarea hieroglifelor.
`normal`	Comportamentul standard: dacă un cuvânt lung nu încape în lățimea containerului - acesta va ieși pur și simplu în afara limitei acestuia (însă va începe pe o linie nouă).

Valoarea implicită: normal.

În acest exemplu, un cuvânt foarte lung nu va încăpea în container și va ieși în afara limitelor acestuia (însă va începe pe o linie nouă):

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

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

Результат:

Acum, acele litere care nu încăpeau, vor fi pur și simplu transferate pe linia următoare:

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

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

Результат:

proprietatea overflow-wrap,
care permite, de asemenea, transferarea literelor unui cuvânt lung pe o linie nouă
proprietatea hyphens,
care activează transferarea cuvintelor pe silabe
proprietatea overflow,
care taie părțile care ies în afara limitei blocului
tag-ul wbr,
care implementează transferuri moi folosind HTML
tag-ul br,
cu ajutorul căruia puteți forța transferarea textului pe o linie nouă