Egenskaben white-space

Egenskaben white-space bestemmer, hvordan tekst skal ombrydes til en ny linje, samt hvordan mellemrum mellem ord og linjeskift (steder, hvor der blev trykket Enter under indtastning af koden) vises.

Syntaks

selektor {
	white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

Værdier

Værdi	Beskrivelse
`nowrap`	Forhindrer tekst i at blive ombrudt til en anden linje, selvom den ikke passer i containeren bredde (i dette tilfælde vil teksten simpelthen flyde ud over dens grænser). Dog vil tilføjelse af tagget `br` tvinge teksten til at blive ombrudt til en ny linje.
`pre`	Teksten vises, som den blev indtastet i editor ved udarbejdelse af hjemmesiden: med alle mellemrum og enter (hvis der er indtastet flere mellemrum i koden, vil der også være flere på skærmen). Dog vil browseren ikke ombryde teksten til en ny linje, hvis den ikke passer i containeren - teksten vil simpelthen flyde ud over dens grænser. Svarer til tagget pre, men i modsætning til dette ændrer det ikke skrifttypen til monospace (om monospace-skrifttyper se egenskaben `font-family`.
`pre-wrap`	Det samme som pre, forskellen er, at hvis teksten er for lang og ikke passer i containeren - vil browseren ombryde den til en anden linje.
`pre-line`	Browseren tager kun højde for Enter i HTML-koden og ignorerer alt andet (flere mellemrum vil vises som ét, browseren sætter selv linjeskift).
`normal`	Standardadfærd: browseren sætter selv linjeskift så ordene passer i containeren. Flere mellemrum i koden vil vises som ét på skærmen.

Standardværdi: normal.

Eksempel . Værdien nowrap

I dette eksempel vil teksten ikke passe i containeren og flyde ud over dens grænser, fordi der er angivet værdien nowrap:

<div id="elem">
	Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Eksempel . Værdien nowrap og tagget br

Hvis du tilføjer tagget br - vil teksten blive ombrudt til en ny linje (netop på det sted, hvor br står):

<div id="elem">
	Lorem ipsum dolor sit <br> amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Eksempel . Værdien pre

I dette eksempel vises teksten sådan, som den blev indtastet i HTML-kode-editoren (med alle indrykninger med Tab-tasten, med Enter og så videre):

<div id="elem">
	Lorem ipsum
	
		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre;
	border: 1px solid red;
}

Eksempel . Værdien pre-wrap

Men her vises teksten sådan, som den blev indtastet i HTML-kode-editoren, dog ombrydes dele, der flyder ud, til en ny linje:

<div id="elem">
	Lorem ipsum
	
		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre-wrap;
	border: 1px solid red;
}

Se også

egenskaberne word-break og overflow-wrap,
som giver mulighed for at ombryde bogstaver i et langt ord til en ny linje
egenskaben tab-size,
som indstiller størrelsen på indrykningen skabt af Tab-tasten
egenskaben hyphens,
som aktiverer orddeling i stavelser
egenskaben overflow,
som afklipper dele, der flyder ud over blokkens grænse
tagget pre,
som viser teksten sådan, som den blev indtastet i HTML-kode-editoren