Egenskapen white-space

Egenskapen white-space ställer in hur text ska brytas till en ny rad, samt hur mellanrum mellan ord och radbrytningar (ställen där Enter trycktes ned när koden skrevs) ska visas.

Syntax

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

Värden

Värde	Beskrivning
`nowrap`	Förbjuder text att brytas till en annan rad, även om den inte får plats i behållarens bredd (i så fall kommer texten helt enkelt att sticka ut utanför dess kanter). Emellertid kommer tillägg av taggen `br` tvinga texten att brytas till en ny rad.
`pre`	Texten visas precis som den skrevs i textredigeraren när webbplatsen kodades: med alla mellanrum och enter (om flera mellanrum skrivs i koden kommer det även att visas flera på skärmen). Webbläsaren kommer dock inte att bryta texten till en ny rad om den inte får plats i behållaren - texten kommer helt enkelt att sticka ut utanför dess kanter. Motsvarar taggen pre, men till skillnad från den ändrar den inte typsnittet till ett fast bredd-typsnitt (om fast bredd-typsnitt se egenskapen `font-family`.
`pre-wrap`	Samma som pre, skillnaden är att om texten är för lång och inte får plats i behållaren - kommer webbläsaren att bryta den till en ny rad.
`pre-line`	Webbläsaren tar endast hänsyn till Enter i HTML-koden och ignorerar allt annat (flera mellanrum kommer att visas som ett, webbläsaren sätter själv ut radbrytningar).
`normal`	Standardbeteende: webbläsaren sätter själv ut radbrytningar så att orden får plats i behållaren. Flera mellanrum i koden kommer att visas som ett på skärmen.

Standardvärde: normal.

Exempel . Värdet nowrap

I detta exempel kommer texten inte att få plats i behållaren och sticka ut utanför dess kanter, eftersom värdet nowrap är satt:

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

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

Exempel . Värdet nowrap och taggen br

Om taggen br läggs till - kommer texten att brytas till en ny rad (precis på den plats, där 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;
}

Exempel . Värdet pre

I detta exempel visas texten precis som den skrevs i HTML-kodredigeraren (med alla indrag med tangenten Tab, med Enter och så vidare):

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

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

Exempel . Värdet pre-wrap

Men nu visas texten precis som den skrevs i HTML-kodredigeraren, men delar som sticker ut bryts till en ny rad:

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

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

Se även

egenskaperna word-break och overflow-wrap,
som tillåter att bokstäver i ett långt ord bryts till en ny rad
egenskapen tab-size,
som ställer in storleken på indrag skapat av tangenten Tab
egenskapen hyphens,
som aktiverar orddelning
egenskapen overflow,
som klipper av delar som sticker ut utanför blockets gräns
taggen pre,
som visar texten precis som den skrevs i HTML-kodredigeraren