White-space қасиеті

white-space қасиеті мәттің жаңа жолға қалай көшуін, сонымен қатар сөздер арасындағы бос орындарды және жол сынықтарын (кодты теру кезінде Enter басылған орындарды) қалай көрсетуін белгілейді.

Синтаксис

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

Мәндері

Мәні	Сипаттама
`nowrap`	Мәттің басқа жолға көшуін тыйым салады, тіпті ол контейнердің еніне сыймаса да (бұл жағдайда мәттің оның шекарасынан тыс қарапайым шығып қалады). Алайда, `br` тегін қосу мәттің жаңа жолға көшуін мәжбүрлейді.
`pre`	Мәт сайтты верстау кезінде HTML редакторында терілгендей көрсетіледі: барлық бос орындармен және 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 код редакторында терілгендей көрсетеді