Hvid-plads - CSS-tricks | CSS Almanak 2025

Egenskaben hvid-plads styrer, hvordan tekst håndteres på det element, den anvendes på. Lad os sige, at du har HTML nøjagtigt som denne:

 A bunch of words you see.

Du har stylet div til at have en indstillet bredde på 100 pixel. Ved en rimelig skriftstørrelse er det for meget tekst til at passe i 100 pixel. Uden at gøre noget, den standard white-spaceværdi er normal, og teksten vil wrap. Se eksemplet nedenfor eller følg dem hjemme med demoen.

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 indpakkes, kan du anvende white-space: nowrap;

Bemærk i HTML-kodeeksempel øverst i denne artikel, der er faktisk to linjeskift, en foran tekstlinjen og en efter, som gør det muligt for teksten at være på sin egen linje (i koden). Når teksten gengives i browseren, ser disse linjeskift ud som om de er fjernet. De ekstra mellemrum på linjen før det første bogstav er også fjernet. Hvis vi vil tvinge browseren til at vise disse linjeskift og ekstra tegn på hvidt mellemrum, kan vi brugewhite-space: pre;

Det kaldes, prefordi adfærden er, som om du havde pakket teksten ind

tags (som standard håndterer hvide mellemrum og linjeskift på den måde). Hvidt mellemrum respekteres nøjagtigt som det er i HTML-koden, og teksten ombrydes ikke, før der er en linjeskift til stede i koden. Dette er især nyttigt, når der bogstaveligt talt vises kode, som har æstetisk fordel af en vis formatering (og noget tid er helt afgørende, som i sprog, der afhænger af det hvide rum!)

Måske kan du lide, hvor prehæder det hvide rum og bryder, men du har brug for teksten til at pakke i stedet for potentielt at bryde ud af dets overordnede container. Det er det, der white-space: pre-wrap;er til:

Endelig white-space: pre-line;vil bryde linjer, hvor de bryder i kode, men ekstra hvidt rum er stadig strippet.

Interessant nok er den sidste linjeskift ikke hædret. I henhold til CSS 2.1-specifikationen: "Linjer brydes ved bevarede nye linjetegn og efter behov for at udfylde linjekasser." så måske giver det mening.

Her er en tabel for at forstå adfærd for alle de forskellige værdier:

	Nye linjer	Mellemrum og faner	Tekstindpakning
normal	Bryder sammen	Bryder sammen	Pak ind
præ	Bevare	Bevare	Ingen wrap
nowrap	Bryder sammen	Bryder sammen	Ingen wrap
pre-wrap	Bevare	Bevare	Pak ind
pre-line	Bevare	Bryder sammen	Pak ind

I CSS3 vil white-spaceejendommen bogstaveligt talt følge dette diagram og kortlægge egenskaberne til text-space-collapseog i text-wrapoverensstemmelse hermed.

Mere information

Mozilla Docs

Browsersupport

Lidt mere kompleks end den almindelige supporttabel, da hver værdi har forskellige niveauer af support:

Browser	Version	Støtte til
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`