Overflow-wrap xususiyati

overflow-wrap xususiyati uzun so‘zning harflarini yangi qatorga ko‘chirishga imkon beradi, agar bu so‘z konteyner eniga sig‘masa.

Sintaksis

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

Qiymatlar

Standart qiymat: normal.

Misol . Normal qiymati

Ushbu misolda juda uzun so‘z konteynerga sig‘maydi va uning chegarasidan chiqib ketadi (bunda yangi qatordan boshlanadi):

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

Результат:

Misol . Break-word qiymati

Endi esa sig‘magan harflar shunchaki keyingi qatorga ko‘chiriladi (bunda uzun so‘z baribir yangi qatordan boshlanadi):

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

Результат:

Shuningdek qarang