word-break xususiyati

word-break xususiyati agar so‘z konteyner eniga sig‘masa, uzun so‘zning harflarini yangi qatorga ko‘chirish imkonini beradi.

Sintaksis

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

Qiymat	Tavsif
`break-all`	Agar so‘z konteynerga sig‘masa, uzun so‘zlarni yangi qatorga ko‘chirishga majburlaydi.
`keep-all`	Iyerogliflarni ko‘chirish uchun.
`normal`	Standart xatti-harakat: agar uzun so‘z konteyner eniga sig‘masa - u shunchaki uning chegarasidan chiqib ketadi (shu bilan birga yangi qatordan boshlanadi).

Standart qiymat: normal.

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

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

Результат:

Endi esa sig‘magan harflar shunchaki keyingi qatorga ko‘chiriladi:

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

Результат:

overflow-wrap xususiyati,
bu ham uzun so‘zning harflarini yangi qatorga ko‘chirish imkonini beradi
hyphens xususiyati,
bu so‘zlarni bo‘g‘inlarga ajratib ko‘chirishni yoqadi
overflow xususiyati,
bu blok chegarasidan chiqib ketayotgan qismlarni kesib tashlaydi
wbr tegi,
bu HTML vositalari yordamida yumshoq ko‘chirishlarni amalga oshiradi
br tegi,
bu yordamida matnni yangi qatorga majburan ko‘chirish mumkin