Prázdné znaky - Triky CSS | Almanach CSS 2025

Vlastnost prázdné místo určuje, jak je text zpracován u prvku, na který je aplikován. Řekněme, že máte HTML přesně takto:

 A bunch of words you see.

Stylem jste nastavili div tak, aby měl nastavenou šířku 100 pixelů. Při přiměřené velikosti písma je to příliš mnoho textu, aby se vešlo na 100 pixelů. Aniž byste něco dělali, výchozí white-spacehodnota je normala text se zalomí. Podívejte se na níže uvedený příklad nebo postupujte podle ukázky doma.

div ( /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; )

Pokud chcete zabránit zalomení textu, můžete použít white-space: nowrap;

V příkladu kódu HTML v horní části tohoto článku si všimněte, že ve skutečnosti existují dva konce řádků, jeden před řádkem textu a jeden za, což umožňuje, aby byl text na vlastním řádku (v kódu). Když se text vykreslí v prohlížeči, zobrazí se tyto konce řádků, jako by byly odstraněny. Rovněž jsou odstraněny mezery na řádku před prvním písmenem. Chceme-li přinutit prohlížeč, aby zobrazoval tyto zalomení řádků a další znaky mezer, které můžeme použítwhite-space: pre;

Říká se tomu, preprotože chování je takové, jako byste zabalili text

značky (které ve výchozím nastavení zpracovávají mezery a konce řádků tímto způsobem). Prázdné místo se ctí přesně tak, jak je to v HTML, a text se nezabalí, dokud nebude v kódu přítomen konec řádku. To je zvláště užitečné při doslovném zobrazení kódu, což esteticky těží z nějakého formátování (a nějaký čas je naprosto zásadní, jako v jazycích závislých na mezerách!)

Možná se vám líbí, jak prectí mezery a přerušení, ale potřebujete text zalomit, místo aby se vymanil z nadřazeného kontejneru. K tomu white-space: pre-wrap;slouží:

Nakonec white-space: pre-line;zlomí řádky tam, kde se zlomí v kódu, ale další prázdné místo je stále odstraněno.

Zajímavé je, že poslední zlom řádku není dodržen. Podle specifikace CSS 2.1: „Řádky jsou rozděleny na zachované znaky nového řádku a podle potřeby vyplňují řádková pole.“ tak to snad dává smysl.

Tady je tabulka k pochopení chování všech různých hodnot:

	Nové řádky	Prostory a karty	Zalamování textu
normální	Kolaps	Kolaps	Zabalit
před	Zachovat	Zachovat	Bez zábalu
nowrap	Kolaps	Kolaps	Bez zábalu
předbalit	Zachovat	Zachovat	Zabalit
pre-line	Zachovat	Kolaps	Zabalit

V CSS3 bude white-spacevlastnost doslova sledovat tento graf a mapovat vlastnosti na text-space-collapsea text-wrappodle toho.

Více informací

Dokumenty Mozilla

Podpora prohlížeče

Trochu složitější než běžná tabulka podpory, protože každá hodnota má různé úrovně podpory:

Prohlížeč	Verze	Podpora
internet Explorer	5.5	`normal \| nowrap`
	6.0	`normal \| pre \| nowrap`
	8+	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Firefox (Gecko)	1,0 (1,0)	`normal \| pre \| nowrap \| -moz-pre-wrap`
	3,0 (1,9)	`normal \| pre \| nowrap \| pre-wrap \| -moz-pre-wrap`
	3,5 (1.9.1)	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Opera	4.0	`normal \| pre \| nowrap`
	8.0	`normal \| pre \| nowrap \| pre-wrap`
	9.5	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Safari (WebKit)	1,0 (85)	`normal \| pre \| nowrap`
Safari (WebKit)	3,0 (522)	`normal \| pre \| nowrap \| pre-wrap \| pre-line`