Praznina - CSS-trikovi | CSS Almanah 2025

Svojstvo razmaka kontrolira način na koji se rukuje tekstom na elementu na koji je primijenjen. Recimo da imate HTML točno ovakav:

 A bunch of words you see.

Div ste oblikovali tako da ima postavljenu širinu od 100 piksela. Pri razumnoj veličini fonta, to je previše teksta da bi se moglo smjestiti u 100 piksela. Bez ikakvog poduzimanja zadana je white-spacevrijednost normali tekst će se zamotati. Pogledajte primjer u nastavku ili slijedite demo kod kuće kod kuće.

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

Ako želite spriječiti umotavanje teksta, možete se prijaviti white-space: nowrap;

Primijetite u primjeru HTML koda na vrhu ovog članka, zapravo postoje dva prijeloma retka, jedan prije retka teksta i jedan nakon, koji omogućuju da tekst bude u svom retku (u kodu). Kada se tekst generira u pregledniku, ti se prijelomi redaka čine kao da su uklonjeni. Također su uklonjeni dodatni razmaci na liniji prije prvog slova. Ako želimo prisiliti preglednik da prikazuje one prijelome redaka i dodatne praznine koje možemo koristitiwhite-space: pre;

Zove se prezato što se ponaša kao da ste umotali tekst

oznake (koje prema zadanim postavkama na taj način obrađuju razmak i crte). Prazan prostor poštuje se točno onakav kakav je u HTML-u, a tekst se ne premotava dok u kodu nema preloma retka. Ovo je osobito korisno kada se doslovno prikazuje kôd, koji estetski koristi neko oblikovanje (a neko je vrijeme presudno, kao u jezicima koji ovise o praznini!)

Možda vam se sviđa kako se prepoštuju razmaci i prelomi, ali tekst vam je potreban da se umota umjesto da potencijalno izbije iz nadređenog spremnika. Za to white-space: pre-wrap;služi:

Konačno, white-space: pre-line;prekinut će se redovi na kojima se unose kodovi, ali dodatni razmak je i dalje lišen.

Zanimljivo je da konačna pauza u redu nije ispoštovana. Prema specifikaciji CSS 2.1: "Linije se lome na sačuvanim znakovima novog retka i prema potrebi za popunjavanje okvira." pa možda to ima smisla.

Evo tablice za razumijevanje ponašanja svih različitih vrijednosti:

	Nove linije	Prostori i kartice	Omotavanje teksta
normalan	Kolaps	Kolaps	Zamotajte
prije	Sačuvati	Sačuvati	Bez omota
nowrap	Kolaps	Kolaps	Bez omota
prethodno umotati	Sačuvati	Sačuvati	Zamotajte
predlinija	Sačuvati	Kolaps	Zamotajte

U CSS3 je white-spacevlasništvo doslovno će slijediti taj grafikon i kartu svojstva da text-space-collapsete text-wrapu skladu s tim.

Više informacija

Mozilla dokumenti

Podrška preglednika

Nešto složeniji od redovite tablice podrške, jer svaka vrijednost ima različite razine podrške:

Preglednik	Verzija	Podrška
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`