Vlastnosť white-space

Vlastnosť white-space nastavuje, ako zalomiť text na nový riadok, ako aj ako zobrazovať medzery medzi slovami a zalomenia riadkov (miesta, kde bol stlačený Enter pri písaní kódu).

Syntax

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

Hodnoty

Hodnota	Popis
`nowrap`	Zakáže textu zalomiť sa na ďalší riadok, aj keď sa nezmestí do šírky kontajnera (v tomto prípade text jednoducho prekročí jeho hranice). Avšak, pridanie značky `br` donúti text prelomiť sa na nový riadok.
`pre`	Text sa zobrazuje tak, ako bol napísaný v editori kódu: so všetkými medzerami a enter-mi (ak je v kóde napísaných niekoľko medzier - na obrazovke bude tiež niekoľko). Zároveň prehliadač nebude zalakovať text na nový riadok, ak sa nezmestí do kontajnera - text jednoducho prekročí jeho hranice. Analóg značky pre, ale na rozdiel od nej nemení font na monospace (o monospace fonte pozri vlastnosť `font-family`.
`pre-wrap`	To isté ako pre, rozdiel je v tom, že ak je text príliš dlhý a nezmestí sa do kontajnera - prehliadač ho zalamuje na ďalší riadok.
`pre-line`	Prehliadač berie do úvahy len Enter-y v HTML kóde a ignoruje všetko ostatné (niekoľko medzier bude vyzerať ako jedna, prehliadač sám rozdeľuje zalomenia riadkov).
`normal`	Štandardné správanie: prehliadač sám rozdeľuje zalomenia riadkov tak, aby sa slová zmestili do kontajnera. Niekoľko medzier v kóde bude vyzerať ako jedna na obrazovke.

Predvolená hodnota: normal.

Príklad . Hodnota nowrap

V tomto príklade sa text nezmestí do kontajnera a prekročí jeho hranice, pretože je zadaná hodnota nowrap:

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

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

Príklad . Hodnota nowrap a značka br

Ak pridáte značku br - text sa zalamuje na nový riadok (práve v tom mieste, kde je br):

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

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

Príklad . Hodnota pre

V tomto príklade sa text zobrazuje tak, ako bol napísaný v editore HTML kódu (so všetkými odsadeniami klávesom Tab, s Enter a tak ďalej):

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

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

Príklad . Hodnota pre-wrap

A teraz sa text zobrazuje tak, ako bol napísaný v editore HTML kódu, avšak, prekračujúce časti sa zalamujú na nový riadok:

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

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

Pozri tiež

vlastnosti word-break a overflow-wrap,
ktoré umožňujú prelomiť písmená dlhého slova na nový riadok
vlastnosť tab-size,
ktorá nastavuje veľkosť odsadenia vytvoreného klávesom Tab
vlastnosť hyphens,
ktorá zapína delenie slov na slabiky
vlastnosť overflow,
ktorá oreže prekračujúce časti za hranicu bloku
značka pre,
ktorá zobrazuje text tak, ako bol napísaný v editore HTML kódu