Presledek - CSS-triki | Almanah CSS 2025

Lastnost presledka nadzoruje, kako se besedilo obravnava v elementu, na katerega je uporabljeno. Recimo, da imate HTML točno tak:

 A bunch of words you see.

Div ste oblikovali tako, da ima nastavljeno širino 100 slikovnih pik. Pri razumni velikosti pisave je to preveč besedila, da bi se prilegalo 100 slikovnim pikam. Ne da bi karkoli storili, je privzeta white-spacevrednost normalbesedilo in besedilo se zavije. Oglejte si spodnji primer ali sledite predstavitvi doma.

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

Če želite preprečiti zavijanje besedila, se lahko prijavite white-space: nowrap;

V primeru kode HTML na vrhu tega članka sta dejansko dva preloma vrstic, ena pred vrstico besedila in ena za njo, ki omogočata, da je besedilo v svoji vrstici (v kodi). Ko se besedilo upodobi v brskalniku, so ti prelomi vrstic videti kot odstranjeni. Prav tako so odstranjeni dodatni presledki v vrstici pred prvo črko. Če želimo prisiliti brskalnik, da prikaže te prelome vrstic in dodatne presledke, jih lahko uporabimowhite-space: pre;

Kliče se, preker je vedenje takšno, kot da bi zavili besedilo

oznake (ki privzeto tako obravnavajo presledek in prelome vrstic). Prazen prostor je spoštovan natanko tako kot v HTML-ju in besedilo se ne zavije, dokler v kodi ni preloma vrstice. To je še posebej koristno pri dobesednem prikazu kode, ki ima estetsko korist od nekega oblikovanja (in nekaj časa je nujno, kot v jezikih, ki so odvisni od presledkov!)

Morda vam je všeč, kako prečasti presledek in prelome, vendar morate besedilo zaviti, namesto da bi se lahko izlomilo iz nadrejenega vsebnika. Za to white-space: pre-wrap;je namenjeno:

Nazadnje white-space: pre-line;bo prekinil vrstice, kjer se vdrejo v kodo, vendar je odvečni prostor še vedno odstranjen.

Zanimivo je, da končni preboj vrstice ni počaščen. V skladu s specifikacijami CSS 2.1: "Vrstice se lomijo pri ohranjenih znakih nove vrstice in po potrebi za zapolnitev polj." tako da je morda to smiselno.

Tu je tabela za razumevanje vedenja vseh različnih vrednot:

	Nove vrstice	Prostori in zavihki	Zavijanje besedila
normalno	Strni	Strni	Zavijte
pred	Ohrani	Ohrani	Brez ovoja
nowrap	Strni	Strni	Brez ovoja
predhodno zaviti	Ohrani	Ohrani	Zavijte
pred vrstico	Ohrani	Strni	Zavijte

V CSS3 bo white-spacelastnost dobesedno sledila temu grafikonu in preslikala lastnosti na text-space-collapsein v text-wrapskladu s tem.

Več informacij

Mozilla Docs

Podpora za brskalnik

Malo bolj zapletena kot običajna tabela podpore, saj ima vsaka vrednost različne ravni podpore:

Brskalnik	Različica	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`