Medzery - Triky CSS | Almanach CSS 2025

Vlastnosť bieleho priestoru riadi, ako sa s textom zaobchádza v prvku, na ktorý sa aplikuje. Povedzme, že máte HTML presne takto:

 A bunch of words you see.

Prvok ste štylizovali tak, aby mal nastavenú šírku 100 pixelov. Pri primeranej veľkosti písma je to príliš veľa textu na to, aby sa zmestilo do 100 pixlov. Predvolená white-spacehodnota je bez toho, aby ste niečo robili normal, a text sa zalomí. Pozrite si príklad uvedený nižšie alebo nasledujte ukážku doma.

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

Ak chcete zabrániť zalomeniu textu, môžete použiť white-space: nowrap;

Všimnite si v príklade kódu HTML v hornej časti tohto článku, že v skutočnosti existujú dva zalomenia riadkov, jeden pred riadkom textu a jeden za, ktoré umožňujú, aby bol text na vlastnom riadku (v kóde). Pri vykresľovaní textu v prehliadači sa tieto zalomenia riadkov zobrazia, akoby boli odstránené. Vymazané sú aj ďalšie medzery na riadku pred prvým písmenom. Ak chceme vynútiť prehľadávač, aby zobrazoval tieto zalomenia riadkov a ďalšie medzery, ktoré môžeme použiťwhite-space: pre;

Volá sa to prepreto, lebo sa správate, akoby ste text zabalili

značky (ktoré štandardne takýmto spôsobom spracovávajú medzery a konce riadkov). Prázdne miesto sa dodržiava presne tak, ako je to v kóde HTML, a text sa nezalomí, kým sa v kóde nenachádza zalomenie riadku. To je obzvlášť užitočné pri doslovnom zobrazovaní kódu, čo esteticky ťaží z určitého formátovania (a nejaký čas je úplne zásadný, ako v jazykoch závislých od bieleho priestoru!)

Možno sa vám páči, ako prectí medzery a zlomy, ale potrebujete text, ktorý by sa mal zabaliť, namiesto toho, aby sa zlomil z nadradeného kontajnera. Na to white-space: pre-wrap;slúži:

Nakoniec white-space: pre-line;zlomí riadky tam, kde sa zlomia v kóde, ale extra biele miesto je stále odstránené.

Je zaujímavé, že posledný zlom riadku nie je dodržaný. Podľa špecifikácie CSS 2.1: „Riadky sú zalomené pri zachovaných znakoch nového riadku a podľa potreby je potrebné vyplniť riadkové políčka.“ takže asi to má zmysel.

Tu je tabuľka na pochopenie správania všetkých rôznych hodnôt:

	Nové linky	Medzery a karty	Zalamovanie textu
normálne	Kolaps	Kolaps	Obal
pre	Zachovať	Zachovať	Bez zábalu
nowrap	Kolaps	Kolaps	Bez zábalu
predbaliť	Zachovať	Zachovať	Obal
predradiť	Zachovať	Kolaps	Obal

V CSS3 bude white-spacevlastníctvo doslova nasledovať tento graf a mapovať vlastnosti na text-space-collapsea text-wrappodľa toho.

Viac informácií

Dokumenty Mozilla

Podpora prehľadávača

Trochu zložitejšie ako bežná tabuľka podpory, pretože každá hodnota má inú úroveň podpory:

Prehliadač	Verzia	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`