Egenskapen white-space

Egenskapen white-space angir hvordan tekst skal brytes over på ny linje, og også hvordan mellomrom mellom ord og linjebrytninger (steder hvor Enter ble trykket under innskriving av kode) skal vises.

Syntaks

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

Verdier

Verdi	Beskrivelse
`nowrap`	Forbyr tekst fra å brytes over på en ny linje, selv om den ikke passer i bredden til beholderen (i dette tilfellet vil teksten bare flyte utover grensene). Imidlertid vil tilføyelsen av taggen `br` tvinge teksten til å brytes over på en ny linje.
`pre`	Teksten vises slik den ble skrevet i teksteditoren under utformingen av nettstedet: med alle mellomrom og enter (hvis flere mellomrom ble skrevet i koden, vil det også vises flere på skjermen). Samtidig vil nettleseren ikke bryte teksten over på en ny linje hvis den ikke passer i beholderen - teksten vil bare flyte utover grensene. Tilsvarer taggen pre, men i motsetning til den endrer den ikke skrifttypen til monospace (se egenskapen `font-family` for monospace-skrifttyper).
`pre-wrap`	Det samme som pre, forskjellen er at hvis teksten er for lang og ikke får plass i beholderen - vil nettleseren bryte den over på en ny linje.
`pre-line`	Nettleseren tar bare hensyn til Enter i HTML-koden og ignorerer alt annet (flere mellomrom vil vises som ett, nettleseren setter selv inn linjebrytninger).
`normal`	Standard oppførsel: nettleseren setter selv inn linjebrytninger på en slik måte at ordene passer i beholderen. Flere mellomrom i koden vil vises som ett på skjermen.

Standardverdi: normal.

Eksempel . Verdien nowrap

I dette eksemplet vil teksten ikke få plass i beholderen og flyte utover grensene, siden verdien nowrap er satt:

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

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

Eksempel . Verdien nowrap og taggen br

Hvis du legger til taggen br - vil teksten brytes over på en ny linje (nøyaktig på det stedet 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 . Verdien pre

I dette eksemplet vises teksten slik den ble skrevet i HTML-kodeeditoren (med alle innrykk 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 . Verdien pre-wrap

Men nå vises teksten slik den ble skrevet i HTML-kodeeditoren, men deler som flyter utover brytes over på 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å

egenskapene word-break og overflow-wrap,
som tillater å bryte bokstavene i et langt ord over på en ny linje
egenskapen tab-size,
som angir størrelsen på innrykket skapt av Tab-tasten
egenskapen hyphens,
som slår på orddeling ved stavelsesgrenser
egenskapen overflow,
som klipper av deler som flyter utover blokkgrensene
taggen pre,
som viser teksten slik den ble skrevet i HTML-kodeeditoren