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

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

Qiymat	Tavsif
`break-word`	Uzun so‘zlarni yangi qatorga ko‘chirishga majburlaydi, agar bu so‘z konteynerga sig‘masa. Bunda so‘z yangi qatordan boshlanadi.
`normal`	Standart xatti-harakat: agar uzun so‘z konteyner eniga sig‘masa - u shunchaki uning chegarasidan chiqib ketadi (bunda yangi qatordan boshlanadi).

Standart qiymat: normal.

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

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

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

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

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

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

word-break xususiyati,
bu ham uzun so‘zning harflarini yangi qatorga ko‘chirishga imkon beradi
word-wrap xususiyati,
bu overflow-wrap xususiyatining eskirgan nomidir
hyphens xususiyati,
bu so‘zlarni bo‘g‘inlarga ajratib ko‘chirishni yoqadi
wbr tegi,
bu HTML vositalari yordamida yumshoq ko‘chirishlarni amalga oshiradi
br tegi,
bu yordamida matnni yangi qatorga majburan ko‘chirish mumkin