white-space касиети

white-space касиети текстти кантип жаңы сапка которууну, ошондой эле сөздөрдүн ортосундагы боштуктарды жана сап бузулуштарын (кодду тезүүдө Enter басылган жерлерди) кантип көрсөтүүнү белгилейт.

Синтаксис

селектор {
	white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

Маанилери

Маани	Сүрөттөмө
`nowrap`	Текстти башка сапка которулууга тыят коёт, ал контейнердин туурасына сыябаса дагы (бул учурда текст анын чектеринен сырткары чыгып кетет). Бирок, `br` тегин кошуу текстти жаңы сапка которулууга мажбурлайт.
`pre`	Текст сайтты версткалоодо блокнотто кантип тезилсе, ошондой көрсөтүлөт: бардык боштуктар менен жана enter-лар менен (эгерде коддо бир нече боштук тезилсе - экранда дагы бир нече болот). Бул учурда браузер текстти контейнерге сыябаса жаңы сапка которбойт - текст анын чектеринен сырткары чыгып кетет. pre тегинин аналогу, бирок андан айырмаланып, шрифтти моношириндикке өзгөртпөйт (моношириндик шрифт жөнүндө `font-family` касиетин караңыз).
`pre-wrap`	pre менен бирдей, айырмасы мында: эгер текст өтө узун болсо жана контейнерге сыябаса - браузер аны башка сапка которот.
`pre-line`	Браузер HTML коддогу Enter-ларды гана эске алат жана калганын инвалиддейт (бир нече боштук бирдей көрүнөт, браузер сап бузулуштарын өзү жайгаштырат).
`normal`	Стандарттуу аракет: браузер сап бузулуштарын сөздөр контейнерге сыя келүү үчүн өзү жайгаштырат. Коддогу бир нече боштук экранда бир гана сыяктуу көрүнөт.

Демейки маани: normal.

Мисал . nowrap мааниси

Бул мисалда текст контейнерге сыябайт жана анын чектеринен сырткары чыгып кетет, анткени nowrap мааниси берилген:

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

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Мисал . nowrap мааниси жана br теги

Эгер br тегин кошсоңуз - текст жаңы сапка которулат (так ошол жерде, br турган жерде):

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

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Мисал . pre мааниси

Бул мисалда текст, HTML код редакторунда кантип тезилсе, ошондой көрсөтүлөт (бардык Tab баскычы менен түзүлгөн чөгүндүлөр, Enter жана башкалар менен):

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

#elem {
	width: 200px;
	white-space: pre;
	border: 1px solid red;
}

Мисал . pre-wrap мааниси

Ал эми азыр текст, HTML код редакторунда кантип тезилсе, ошондой көрсөтүлөт, бирок, сыртка чыгып жаткан бөлүктөрү жаңы сапка которулат:

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

#elem {
	width: 200px;
	white-space: pre-wrap;
	border: 1px solid red;
}

Ошондой эле караңыз

word-break жана overflow-wrap касиеттери,
алар узун сөздүн тамгаларын жаңы сапка которууга мүмкүндүк берет
tab-size касиети,
ал Tab баскычы менен түзүлгөн чөгүндүн көлөмүн белгилейт
hyphens касиети,
ал сөздөрдү муундар боюнча бузууну иштетет
overflow касиети,
ал блоктун чегинен сыртка чыгып жаткан бөлүктөрдү кесип салат
pre теги,
ал текстти HTML код редакторунда кантип тезилсе, ошондой көрсөтөт