CSS/Eigenschaften/white-space

Die Eigenschaft white-space legt das Verhalten für den Zeilenumbruch und den Umgang mit Weißraum (Leerzeichen) fest.

Erlaubte Werte

• normal: Weißraum im Inhalt von HTML Elementen wird zu einer Leerstelle zusammengefasst. Textzeilen werden nach Bedarf, wo Text über die Elementgrenze hinausragt, umgebrochen.
• nowrap: Weißraum wird zusammengefasst (inklusive der Zeilenumbrüche im HTML-Text) und es erfolgt kein automatischer Zeilenumbruch. Lediglich <br>-Elemente werden aber beachtet.
• pre: Weißraum bleibt unverändert erhalten. Zeilenumbrüche finden nur statt, wo im Quelltext ein Zeilenumbruch-Zeichen steht (d. h. wo Sie in Ihrem Editor eine neue Zeile begonnen haben oder wo Sie per Programm das Zeichen &#10 oder \n eingesetzt haben)
• pre-wrap: Weißraum bleibt unverändert erhalten. Zeilenumbrüche finden an den von Ihnen angegebenen Stellen statt, und dort, wo Text über die Elementgrenze hinausragt. Wird innerhalb einer Folge von Weißraumzeichen ein Zeilenumbruch erforderlich, findet der Umbruch am Ende dieser Folge statt. Leerzeichen am Zeilenende werden bei der Berechnung der Elementgröße nicht berücksichtigt.
• pre-line: Weißraum wird zusammengefasst, außer Newline-Zeichen. Diese führen zu einem Zeilenumbruch.
• break-spaces: entspricht pre-wrap, mit diesen Abweichungen:
  • Eine Folge von Weißraumzeichen nimmt immer Platz ein und wird bei der Berechnung der Elemengröße beachtet
  • Ein Zeilenumbruch kann innerhalb einer solchen Folge durchgeführt werden, die übrigen Weißraumzeichen landen am Anfang der Folgezeile

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

normal

anwendbar auf

alle Elemente

Vererbung

ja

animierbar

nein

Beispiel

 div { white-space: pre; }

verhält sich wie das HTML-Element pre

Beachten Sie: Die white-space-Eigenschaft steuert genau genommen mehrere unterschiedliche Aspekte des Layouts, deshalb wird white-space in Zukunft als Shorthand-Eigenschaft für white-space-collapse, text-wrap (oder text-wrap-mode) und white-space-trim aufgefasst. Die alten Werte bleiben zwecks Kompatibilität gültig. Im September 2023 ist diese Entwicklung noch experimentell und von den Browsern nicht unterstützt.

Siehe auch

• Typografie/Textformatierung
  • Leerräume mit white-space

Weblinks

• Spezifikation (W3C): white space CSS Textformating Module Level 3
• MDN: white-space