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