Vlastnost white-space

Vlastnost white-space nastavuje, jak zalomit text na nový řádek, a také jak zobrazovat mezery mezi slovy a zalomení řádků (místa, kde byl stisknut Enter při psaní kódu).

Syntaxe

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

Hodnoty

Hodnota	Popis
`nowrap`	Zakáže textu zalomení na další řádek, i když se nevejde do šířky kontejneru (v tomto případě text jednoduše překročí jeho hranice). Avšak přidání tagu `br` donutí text zalomit na nový řádek.
`pre`	Text se zobrazuje tak, jak byl napsán v editoru při vytváření webu: se všemi mezerami a entery (pokud je v kódu napsáno několik mezer, na obrazovce jich bude také několik). Zároveň prohlížeč nebude text zalomat na nový řádek, pokud se nevejde do kontejneru - text jednoduše překročí jeho hranice. Ekvivalent tagu pre, ale na rozdíl od něj nemění písmo na monospace (o monospace písmu viz. vlastnost `font-family`.
`pre-wrap`	To samé jako pre, rozdíl je v tom, že pokud je text příliš dlouhý a nevejde se do kontejneru - prohlížeč jej zalomí na další řádek.
`pre-line`	Prohlížeč bere v úvahu pouze Entery v HTML kódu a ignoruje vše ostatní (několik mezer bude vypadat jako jedna, prohlížeč sám rozděluje zalomení řádků).
`normal`	Standardní chování: prohlížeč sám rozděluje zalomení řádků tak, aby se slova vešla do kontejneru. Několik mezer v kódu bude vypadat jako jedna na obrazovce.

Výchozí hodnota: normal.

Příklad . Hodnota nowrap

V tomto příkladu se text nevejde do kontejneru a překročí jeho hranice, protože je nastavena hodnota nowrap:

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

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

Příklad . Hodnota nowrap a tag br

Pokud přidáte tag br - text se zalomí na nový řádek (přesně v tom místě, kde stojí br):

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

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

Příklad . Hodnota pre

V tomto příkladu se text zobrazuje tak, jak byl napsán v editoru HTML kódu (se všemi odsazeními klávesou Tab, s Enter a tak dále):

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

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

Příklad . Hodnota pre-wrap

A nyní se text zobrazuje tak, jak byl napsán v editoru HTML kódu, avšak části přesahující hranice se zalomí na nový řádek:

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

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

Viz také

vlastnosti word-break a overflow-wrap,
které umožňují zalomit písmena dlouhého slova na nový řádek
vlastnost tab-size,
která nastavuje velikost odsazení vytvořeného klávesou Tab
vlastnost hyphens,
která zapíná dělení slov na slabiky
vlastnost overflow,
která ořezává části přesahující za hranici bloku
tag pre,
který zobrazuje text tak, jak byl napsán v editoru HTML kódu