word-break хусусияти

word-break хусусияти контейнернинг энига сиғмайдиган бўлган узун сўзнинг ҳарфларини янаги сатрга кўчириш имконини беради.

Синтаксис

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

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

standart қиймат: normal.

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

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

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

Энди сиғмаган ҳарфлар оддийгина кейинги сатрга кўчирилади:

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

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

overflow-wrap хусусияти,
бу ҳам узун сўзнинг ҳарфларини янаги сатрга кўчириш имконини беради
hyphens хусусияти,
бу сўзларни бугинларга ажратиб кўчиришни кўллайди
overflow хусусияти,
бу блокнинг чегарасидан чиқиб кетган қисмларни кесади
wbr теги,
бу HTML воситаларида юмшоқ кўчиришларни амалга оширади
br теги,
бу воситасида матнни мажбурий янаги сатрга кўчириш амалга оширилади