Word-break xassəsi

word-break xassəsi, əgər söz konteynerin eninə sığmırsa, onun hərflərinin yeni sətirə köçürülməsinə imkan verir.

Sintaksis

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

Qiymətlər

Susmaya görə qiymət: normal.

Nümunə . Normal qiyməti

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

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

Результат:

Nümunə . Break-all qiyməti

İndi isə sığmayan həmin hərflər sadəcə növbəti sətirə köçürüləcək:

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

Результат:

Həmçinin bax