Eigenschap white-space

De eigenschap white-space bepaalt hoe tekst naar een nieuwe regel moet worden afgebroken, en ook hoe spaties tussen woorden en regelovergangen (plaatsen waar Enter werd ingedrukt bij het typen van de code) worden weergegeven.

Syntaxis

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

Waarden

Waarde	Beschrijving
`nowrap`	Voorkomt dat tekst naar een nieuwe regel wordt afgebroken, zelfs als deze niet past in de breedte van de container (in dat geval loopt de tekst gewoon over de grenzen heen). Het toevoegen van de tag `br` zal de tekst echter wel naar een nieuwe regel laten afbreken.
`pre`	De tekst wordt weergegeven zoals hij werd getypt in de teksteditor tijdens het opmaken van de website: met alle spaties en enters (als er meerdere spaties in de code staan, zullen er ook meerdere op het scherm zijn). De browser zal de tekst echter niet naar een nieuwe regel afbreken als deze niet past in de container - de tekst loopt dan gewoon over de grenzen heen. Vergelijkbaar met de pre-tag, maar in tegenstelling daarmee verandert het niet het lettertype in een monospace lettertype (voor monospace lettertype, zie de eigenschap `font-family`.
`pre-wrap`	Hetzelfde als pre, het verschil is dat als de tekst te lang is en niet in de container past - de browser zal het naar een nieuwe regel afbreken.
`pre-line`	De browser houdt alleen rekening met Enter's in de HTML-code en negeert al het andere (meerdere spaties zullen er als één uitzien, de browser plaatst zelf regelafbrekingen).
`normal`	Standaard gedrag: de browser plaatst zelf regelafbrekingen zodat de woorden in de container passen. Meerdere spaties in de code zullen er als één op het scherm uitzien.

Standaardwaarde: normal.

Voorbeeld . Waarde nowrap

In dit voorbeeld past de tekst niet in de container en loopt over de grenzen heen, omdat de waarde nowrap is ingesteld:

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

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

Voorbeeld . Waarde nowrap en de br-tag

Als je de tag br toevoegt - wordt de tekst afgebroken naar een nieuwe regel (precies op de plek waar br staat):

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

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

Voorbeeld . Waarde pre

In dit voorbeeld wordt de tekst weergegeven zoals hij werd getypt in de HTML-code-editor (met alle inspringingen met de Tab-toets, met Enter en zo verder):

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

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

Voorbeeld . Waarde pre-wrap

En nu wordt de tekst weergegeven zoals hij was getypt in de HTML-code-editor, maar uitstekende delen worden naar een nieuwe regel afgebroken:

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

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

Zie ook

de eigenschappen word-break en overflow-wrap,
die het mogelijk maken letters van een lang woord naar een nieuwe regel af te breken
de eigenschap tab-size,
die de grootte van de inspringing, gemaakt door de Tab-toets, instelt
de eigenschap hyphens,
die woordafbrekingen in lettergrepen inschakelt
de eigenschap overflow,
die uitstekende delen van het blok afsnijdt
de tag pre,
die tekst toont zoals hij werd getypt in de HTML-code-editor