White-space xususiyati

white-space xususiyati matnni yangi qatorga qanday ko'chirishni, shuningdek so'zlar orasidagi bo'shliqlar va qator ko'chishlarini (kodni terish paytida Enter tugmasi bosilgan joylarni) qanday ko'rsatishni belgilaydi.

Sintaksis

selektor {
	white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

Qiymatlar

Qiymat	Tavsif
`nowrap`	Matnning boshqa qatorga ko'chishini taqiqlaydi, hatto u konteynerning kengligiga sig'masa ham (bunda matn shunchaki uning chegaralaridan chiqib ketadi). Biroq, `br` teqini qo'shish matnni yangi qatorga ko'chirishga majbur qiladi.
`pre`	Matn saytni yasashda matn muharririda terilgandek ko'rsatiladi: barcha bo'shliqlar va enterlar bilan (agar kodda bir nechta bo'shliq terilgan bo'lsa - ekranda ham bir nechta bo'ladi). Bunda brauzer matnni yangi qatorga ko'chirmaydi, agar u konteynerga sig'masa - matn shunchaki uning chegaralaridan chiqib ketadi. pre tegining analogi, lekin undan farqli o'laroq shriftni monospace ga o'zgartirmaydi (monospace shrifti haqida qo'shimcha ma'lumot uchun `font-family` xususiyatiga qarang.
`pre-wrap`	Pre bilan bir xil, farqi shundaki, agar matn juda uzun bo'lsa va konteynga sig'masa - brauzer uni boshqa qatorga ko'chiradi.
`pre-line`	Brauzer faqat HTML kodidagi Enter-larni hisobga oladi va qolgan hamma narsani e'tiborsiz qoldiradi (bir nechta bo'shliq bitta bo'shliqdek ko'rinadi, brauzer qator uzilishlarini o'zi joylashtiradi).
`normal`	Standart xatti-harakat: brauzer so'zlar konteynerga sig'adigan qilib qator uzilishlarini o'zi joylashtiradi. Koddagi bir nechta bo'shliq ekranda bitta bo'shliqdek ko'rinadi.

Standart qiymati: normal.

Misol . Nowrap qiymati

Ushbu misolda matn konteynerga sig'maydi va uning chegaralaridan chiqib ketadi, chunki nowrap qiymati berilgan:

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

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

Misol . Nowrap qiymati va br tegi

Agar br teqini qo'shsak - matn yangi qatorga ko'chadi (aynan br turgan joyda):

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

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

Misol . Pre qiymati

Ushbu misolda matn HTML kod muharririda terilgandek ko'rsatiladi (barcha Tab tugmasi bilan qilingan chekinishlar, Enter va boshqalar bilan):

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

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

Misol . Pre-wrap qiymati

Hozir esa matn HTML kod muharririda terilgandek ko'rsatiladi, biroq, chiqib ketayotgan qismlar yangi qatorga ko'chiriladi:

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

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

Shuningdek qarang

word-break va overflow-wrap xususiyatlari,
uzun so'zning harflarini yangi qatorga ko'chirishga imkon beradi
tab-size xususiyati,
Tab tugmasi yordamida yaratilgan chekinish hajmini belgilaydi
hyphens xususiyati,
so'zlarni bo'g'inlarga bo'lib ko'chirishni yoqadi
overflow xususiyati,
blok chegarasidan chiqib ketayotgan qismlarni kesib tashlaydi
pre tegi,
matnni HTML kod muharririda terilgandek ko'rsatadi