white-space

Die CSS Eigenschaft white-space wird benutzt, um Leerzeichen innerhalb eines Elementes zu handhaben.

Hinweis: Um Wörter umzubrechen, verwenden Sie stattdessen overflow-wrap, word-break, oder hyphens.

Syntax

/* Schlüsselwortwerte */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

/* Globale Werte */
white-space: inherit;
white-space: initial;
white-space: unset;

Die Eigenschaft white-space wird als ein einzelnes Schlüsselwort angegeben, das aus der untenstehenden Liste von Werten ausgewählt wird.

Werte

normal
Aufeinanderfolgende Leerzeichen fallen zusammen. Zeilenumbruch-Zeichen im Quellcode werden als andere Leerzeichen gehandhabt. Bricht Zeilen notwendigen Stellen um und füllt die Zeile.
nowrap
Wie normal, aber unterdrückt Zeilenumbrüche im Text.
pre
Aufeinanderfolgende Leerzeichen bleiben erhalten, Zeilen werden nur an Zeilenumbruch-Zeichen im Quellcode und an  <br>-Elementen gebrochen.
pre-wrap
Aufeinanderfolgende Zwischenraumzeichen bleiben erhalten. Zeilen werden an Zeilenumbruch-Zeichen, an <br> und an notwendigen Stellen um die Zeile zu füllen umgebrochen.
pre-line
Aufeinanderfolgende Zwischenraumzeichen fallen zusammen. Zeilen werden an Zeilenumbruch-Zeichen, an <br> und an notwendigen Stellen um die Zeile zu füllen umgebrochen.
break-spaces
 Das Verhalten ist bis auf eine Ausnahme identisch mit pre-line:
  • Jede Sequenz von erhaltenen Zwischenraumzeichen nimmt immer Platz ein, auch am Ende der Zeile.
  • Nach jedem enthaltenen Zwischenraumzeichen besteht die Möglichkeit eines Zeilenumbruchs, auch zwischen Zwischenraumzeichen.
  • Solche beibehaltenen Leerräume nehmen Platz in Anspruch und beeinflussen somit die intrinsischen Größen der Box (Min-Inhaltsgröße und Max-Inhaltsgröße).

Die folgende Tabelle fasst das Verhalten der verschiedenen white-space Zwischenraumzeichen zusammen:

Neue Zeilen Leerzeichen und Tabulatoren Textumbruch Zeilenende-Raum
normal Fallen zusammen Fallen zusammen Umbruch Entfernt
nowrap Fallen zusammen Fallen zusammen Kein Umbruch Entfernt
pre Bleiben erhalten Bleiben erhalten Kein Umbruch Entfernt
pre-wrap Bleiben erhalten Bleiben erhalten Umbruch hängend
pre-line Bleiben erhalten Fallen zusammen Umbruch Entfernt
break-space Bleiben erhalten Bleiben erhalten Umbruch Umbruch

Formale Definition

Initialwertnormal
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

normal | pre | nowrap | pre-wrap | pre-line | break-spaces

Beispiele

Einfaches Beispiel

code {
  white-space: pre;
}

Zeilenumbrüche innerhalb von <pre> Elementen

pre {
  word-wrap: break-word;      /* IE 5.5-7 */
  white-space: pre-wrap;      /* Modern browsers */
}

In Aktion

HTML

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

Ergebnis

Spezifikationen

Spezifikation Status Kommentar
CSS Text Module Level 3
Die Definition von 'white-space' in dieser Spezifikation.
Anwärter Empfehlung Präzisiert den Umbruch-Algorithmus. Äußerlich bewirkt der white-space eine kompakte Eigenschaft.
CSS Level 2 (Revision 1)
Die Definition von 'white-space' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

BCD tables only load in the browser

Siehe auch