Xüsusiyyət white-space

Xüsusiyyət white-space mətinin yeni sətirə necə köçürüləcəyini, həmçinin sözlər arasındakı boşluqların və sətir qırılmalarının (kodun yazılması zamanı Enter basılan yerlərin) necə göstəriləcəyini təyin edir.

Sintaksis

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

Qiymətlər

Qiymət	Təsvir
`nowrap`	Mətnin başqa sətirə köçürülməsini qadağan edir, hətta konteynerin eninə sığmırsa belə (bu halda mətn sadəcə onun sərhədlərindən kənara çıxacaq). Lakin, `br` teqinin əlavə edilməsi mətni yeni sətirə köçürməyə məcbur edəcək.
`pre`	Mətn saytın yığılması zamanı mətn redaktorunda necə yazılıbsa, elə göstərilir: bütün boşluqlar və enter-lərlə (əgər kodda bir neçə boşluq yazılıbsa, ekranda da bir neçə olacaq). Eyni zamanda brauzer mətn konteynerə sığmırsa, onu yeni sətirə köçürməyəcək - mətn sadəcə onun sərhədlərindən kənara çıxacaq. pre teqi ilə analoqdur, lakin ondan fərqli olaraq şrifti monospace-ə dəyişmir (monospace şrifti haqqında ətraflı məlumat üçün bax: `font-family` xüsusiyyəti.
`pre-wrap`	Pre ilə eynidir, fərq ondadır ki, əgər mətn çox uzundursa və konteynerə sığmırsa - brauzer onu başqa sətirə köçürəcək.
`pre-line`	Brauzer yalnız HTML kodundakı Enter-ləri nəzərə alır və qalan hər şeyi ignore edir (bir neçə boşluq tək kimi görünəcək, brauzer sətir qırılmalarını özü təyin edir).
`normal`	Standart davranış: brauzer sözlərin konteynerə sığması üçün sətir qırılmalarını özü təyin edir. Kodda bir neçə boşluq ekranda tək kimi görünəcək.

Default qiymət: normal.

Nümunə . Nowrap qiyməti

Bu nümunədə mətn konteynerə sığmayacaq və onun sərhədlərindən kənara çıxacaq, çünki nowrap qiyməti təyin edilib:

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

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

Nümunə . Nowrap qiyməti və br teqi

Əgər br teqini əlavə etsək - mətn yeni sətirə köçürüləcək (məhz br teqinin olduğu yerdə):

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

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

Nümunə . Pre qiyməti

Bu nümunədə mətn HTML kodunun redaktorunda necə yazılıbsa, elə göstərilir (Tab düyməsi ilə yaradılmış bütün boşluqlar, Enter və s. ilə):

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

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

Nümunə . Pre-wrap qiyməti

İndi isə mətn HTML kodunun redaktorunda necə yazılıbsa, elə göstərilir, lakin kənara çıxan hissələr yeni sətirə köçürülür:

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

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

Həmçinin bax

word-break və overflow-wrap xüsusiyyətləri,
uzun sözün hərflərinin yeni sətirə köçürülməsinə imkan verir
tab-size xüsusiyyəti,
Tab düyməsi ilə yaradılmış boşluğun ölçüsünü təyin edir
hyphens xüsusiyyəti,
sözlərin hecalara bölünərək köçürülməsini aktivləşdirir
overflow xüsusiyyəti,
blokun sərhədlərindən kənara çıxan hissələri kəsir
pre teqi,
mətni HTML kodunun redaktorunda necə yazılıbsa, elə göstərir