Хусусияти 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`	Браузер фақат Enter-ҳоро дар коди HTML ба назар мегирад ва ҳамаи дигар чизҳоро нодида мегирад (чанд фосила як фосила ба назар хоҳад расид, браузер худ шикастани сатрҳоро мегузорад).
`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

Дар ин намуна матн ба монанде ки дар мuhаррири коди 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,
ки матнро ба монанде ки дар мuhаррири коди HTML навишта шуда буд намоиш медиҳад