Eigenschaft white-space

Die Eigenschaft white-space legt fest, wie Text in eine neue Zeile umgebrochen wird, und auch wie Leerzeichen zwischen Wörtern und Zeilenumbrüche (Stellen, an denen Enter beim Schreiben des Codes gedrückt wurde) angezeigt werden.

Syntax

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

Werte

Wert	Beschreibung
`nowrap`	Verhindert, dass Text in eine andere Zeile umgebrochen wird, selbst wenn er nicht in die Breite des Containers passt (in diesem Fall läuft der Text einfach über seine Grenzen hinaus). Allerdings erzwingt das Hinzufügen des Tags `br` einen Zeilenumbruch.
`pre`	Der Text wird so angezeigt, wie er im Editor beim Erstellen der Website eingegeben wurde: mit allen Leerzeichen und Enter-Umbrüchen (wenn im Code mehrere Leerzeichen eingegeben wurden, werden auch mehrere auf dem Bildschirm angezeigt). Allerdings bricht der Browser den Text nicht in eine neue Zeile um, wenn er nicht in den Container passt - der Text läuft einfach über seine Grenzen hinaus. Analogon zum Tag pre, ändert aber im Gegensatz zu diesem nicht die Schriftart auf eine nichtproportionale Schrift (zu nichtproportionalen Schriftarten siehe Eigenschaft `font-family`.
`pre-wrap`	Dasselbe wie pre, mit dem Unterschied, dass der Browser den Text umbricht, wenn er zu lang ist und nicht in den Container passt.
`pre-line`	Der Browser berücksichtigt nur die Enter-Umbrüche im HTML-Code und ignoriert alles andere (mehrere Leerzeichen werden als eines angezeigt, der Browser setzt die Zeilenumbrüche selbstständig).
`normal`	Standardverhalten: Der Browser setzt die Zeilenumbrüche selbstständig, so dass die Wörter in den Container passen. Mehrere Leerzeichen im Code werden auf dem Bildschirm als eines angezeigt.

Standardwert: normal.

Beispiel . Wert nowrap

In diesem Beispiel passt der Text nicht in den Container und läuft über seine Grenzen hinaus, da der Wert nowrap gesetzt ist:

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

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

Beispiel . Wert nowrap und der Tag br

Wenn der Tag br hinzugefügt wird - wird der Text in eine neue Zeile umgebrochen (genau an der Stelle, an der br steht):

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

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

Beispiel . Wert pre

In diesem Beispiel wird der Text so angezeigt, wie er im HTML-Editor eingegeben wurde (mit allen Einrückungen durch die Tab-Taste, mit Enter und so weiter):

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

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

Beispiel . Wert pre-wrap

Jetzt wird der Text so angezeigt, wie er im HTML-Editor eingegeben wurde, jedoch werden überstehende Teile in eine neue Zeile umgebrochen:

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

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

Siehe auch

die Eigenschaften word-break und overflow-wrap,
die es erlauben, die Buchstaben eines langen Wortes in eine neue Zeile umzubrechen
die Eigenschaft tab-size,
die die Größe des durch die Tab-Taste erzeugten Einzugs festlegt
die Eigenschaft hyphens,
die die Silbentrennung aktiviert
die Eigenschaft overflow,
die die über die Blockgrenze hinausragenden Teile abschneidet
der Tag pre,
der den Text so anzeigt, wie er im HTML-Editor eingegeben wurde