Overflow-wrap xassəsi

overflow-wrap xassəsi konteynerin eninə sığmayan uzun sözün hərflərinin yeni sətirə köçürülməsinə imkan verir.

Sintaksis

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

Dəyərlər

Susmaya görə dəyər: normal.

Nümunə . Normal dəyəri

Bu nümunədə çox uzun söz konteynerə sığmayacaq və onun sərhədlərindən kənara çıxacaq (bu zaman yeni sətirdən başlayacaq):

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;
}

Результат:

Nümunə . Break-word dəyəri

İndi isə sığmayan həmin hərflər sadəcə növbəti sətirə köçürüləcək (bu zaman uzun söz yenə də yeni sətirdən başlayacaq):

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;
}

Результат:

Həmçinin bax