Hvit-plass - CSS-triks | CSS-almanakk 2025

White-space-egenskapen styrer hvordan tekst håndteres på elementet den brukes på. La oss si at du har HTML akkurat slik:

 A bunch of words you see.

Du har stylet div til å ha en angitt bredde på 100 px. Med en rimelig skriftstørrelse er det for mye tekst til å passe inn i 100 px. Uten å gjøre noe, standard white-spaceer verdi normal, og teksten vil vikle. Se eksemplet nedenfor eller følg med demoen hjemme.

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

Hvis du vil forhindre at teksten brytes inn, kan du søke white-space: nowrap;

Legg merke til i HTML-kodeeksempel øverst i denne artikkelen, det er faktisk to linjeskift, en før tekstlinjen og en etter, som gjør at teksten kan være på sin egen linje (i koden). Når teksten gjengis i nettleseren, ser disse linjeskiftene ut som om de er fjernet. Ekstra striper er ekstra mellomrom på linjen før første bokstav. Hvis vi vil tvinge nettleseren til å vise disse linjeskiftene og ekstra tegn på mellomrom, kan vi brukewhite-space: pre;

Det kalles prefordi oppførselen er som om du hadde pakket teksten inn

koder (som standard håndterer mellomrom og linjeskift på den måten). Hvite mellomrom blir respektert nøyaktig slik det er i HTML-en, og teksten brytes ikke før det er strek i koden. Dette er spesielt nyttig når du bokstavelig talt viser kode, som har estetisk nytte av noen formatering (og litt tid er helt avgjørende, som på språk som er avhengige av romfarter!)

Kanskje du liker hvor preærefullt hvite mellomrom og bryter, men du trenger at teksten skal brytes inn i stedet for potensielt å bryte ut av den overordnede beholderen. Det er det som white-space: pre-wrap;er for:

Til slutt white-space: pre-line;vil bryte linjer der de bryter inn kode, men ekstra hvite mellomrom er fortsatt strippet.

Interessant, den siste linjeskiftet blir ikke respektert. I henhold til CSS 2.1-spesifikasjonen: "Linjene er brutt ved bevarte nye linjetegn, og etter behov for å fylle linjeboksene." så kanskje det gir mening.

Her er en tabell for å forstå oppførselen til alle de forskjellige verdiene:

	Nye linjer	Rom og faner	Innpakning av tekst
normal	Kollapse	Kollapse	Pakke inn
pre	Bevare	Bevare	Ingen omslag
nowrap	Kollapse	Kollapse	Ingen omslag
pre-wrap	Bevare	Bevare	Pakke inn
pre-line	Bevare	Kollapse	Pakke inn

I CSS3 vil white-spaceeiendommen bokstavelig talt følge det diagrammet og kartlegge egenskapene til text-space-collapseog text-wrapderetter.

Mer informasjon

Mozilla Docs

Nettleserstøtte

Litt mer komplisert enn den vanlige støttetabellen, siden hver verdi har forskjellige nivåer av støtte:

Nettleser	Versjon	Støtte av
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`