Свойство overflow-wrap

overflow-wrap свойстваси узун сўзнинг ҳарфларини контейнернинг энига сиғмаса, янаги сатрга кўчиришга имкон беради.

Синтаксис

селектор {
	overflow-wrap: break-word | normal;
}

Қиймат	Тасниф
`break-word`	Узун сўзлар контейнерга сиғмаса, янаги сатрга кўчирилишига сабаб бўлади. Бу ҳолда сўз янаги сатрдан бошланади.
`normal`	Стандарт хат-харакат: агар узун сўз контейнер энига сиғмаса - у шундай қолаверади (бу ҳолда у янаги сатрдан бошланади).

Стандарт қиймат: normal.

Бу мисолда жуда узун сўз контейнерга сиғмайди ва унинг чегараларидан ташкарига чиқади (бу ҳолда у янаги сатрдан бошланади):

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

Энди сиғмаган ўша ҳарфлар сифатида, оддийгина кейинги сатрга кўчирилади (бу ҳолда узун сўз барча ҳолда янаги сатрдан бошланади):

<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 свойстваси,
бу ҳам узун сўзнинг ҳарфларини янаги сатрга кўчиришга имкон беради
word-wrap свойстваси,
бу overflow-wrap свойствасининг эскириб қолган номидир
hyphens свойстваси,
бу сўзларни бўғинлар бўйича кўчиришни қўллайди
wbr теги,
бу HTML воситаларида енгил кўчиришларни амалга оширади
br теги,
бу воситада матнни янаги сатрга мажбурий кўчириш мумкин