word-break қасиеті

word-break қасиеті контейнердің еніне сыймайтын ұзын сөздің әріптерін жаңа жолға көшіруге мүмкіндік береді.

Синтаксис

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

Мәні	Сипаттама
`break-all`	Контейнерге сыймайтын ұзын сөздерді жаңа жолға көшіруге мәжбүрлейді.
`keep-all`	Иероглифтерді көшіру үшін.
`normal`	Әдепкі мінез-құлық: егер ұзын сөз контейнердің еніне сыймаса - ол оның шекарасынан шығып кетеді (бірақ жаңа жолдан басталады).

Әдепкі мәні: 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 тегі,
ол мәтінді жаңа жолға мәжбүрлеп көшіруге мүмкіндік береді