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 կոդի խմբագրում