white-space

Zusammenfassung

Die white-space CSS-Einstellung 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.
Arbeitsentwurf 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
white-spaceChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 5.5Opera Vollständige Unterstützung 4Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 1Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 10.1Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0
break-spacesChrome Vollständige Unterstützung 76Edge Vollständige Unterstützung 79Firefox Vollständige Unterstützung 69IE Keine Unterstützung NeinOpera Vollständige Unterstützung 62Safari Vollständige Unterstützung 13.1WebView Android Vollständige Unterstützung 76Chrome Android Vollständige Unterstützung 76Firefox Android Keine Unterstützung NeinOpera Android Vollständige Unterstützung 54Safari iOS Vollständige Unterstützung 13.4Samsung Internet Android Vollständige Unterstützung 12.0
nowrapChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 5.5Opera Vollständige Unterstützung 4Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 1Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 10.1Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0
preChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 6Opera Vollständige Unterstützung 4Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0
pre-lineChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 3.5IE Vollständige Unterstützung 8Opera Vollständige Unterstützung 9.5Safari Vollständige Unterstützung 3WebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0
pre-wrapChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 3
Vollständige Unterstützung 3
Keine Unterstützung 1 — 3.6
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE Vollständige Unterstützung 8
Hinweise
Vollständige Unterstützung 8
Hinweise
Hinweise From Internet Explorer 5.5 to 7, word-wrap: break-word; can be used for line breaks in pre elements.
Opera Vollständige Unterstützung 8Safari Vollständige Unterstützung 3WebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0
Support in SVGChrome Keine Unterstützung NeinEdge Keine Unterstützung 12 — 79Firefox Vollständige Unterstützung 36IE Vollständige Unterstützung 10Opera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 36Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
Support on <textarea>Chrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 36IE Vollständige Unterstützung 5.5Opera Vollständige Unterstützung 4Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 36Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch