white-space: nowrap vs pre vs pre-wrap – Leerraum und Umbruch

Zwei Fragen, fünf Antworten

nowrap: eine Zeile, komme was wolle

nowrap fasst Leerraum zusammen wie normal, verbietet aber den automatischen Umbruch. Nützlich für Beschriftungen, die nicht getrennt werden dürfen – „24 px“, ein Datum, eine Schaltfläche –, gefährlich für Text in schmalen Containern, weil er dann überläuft. Meist gehört ein overflow dazu.

pre und pre-wrap: Quelltext erhalten

pre ist der Ausgangswert des pre-Elements: jedes Leerzeichen, jeder Umbruch bleibt, nichts bricht automatisch um – lange Codezeilen laufen über den Rand und brauchen overflow-x: auto. pre-wrap erhält den Leerraum ebenfalls, erlaubt aber Umbruch am Rand – für Code auf schmalen Bildschirmen und für Nutzertexte mit Absätzen. pre-line erhält nur die Umbrüche und fasst Leerzeichen zusammen.

Wie der Browser Leerraum sonst behandelt

Um die Werte zu verstehen, hilft ein Blick auf den Ausgangszustand. Im Normalfall fasst der Browser jede Folge aus Leerzeichen, Tabulatoren und Zeilenumbrüchen im Quelltext zu einem einzigen Leerzeichen zusammen; Leerraum am Anfang und am Ende einer Zeile fällt ganz weg. Der Zeilenumbruch im Quelltext ist deshalb nur ein Leerzeichen, und zehn Leerzeichen hintereinander sind eines. Genau darum lässt sich Quelltext frei einrücken, ohne dass die Darstellung sich ändert.

Die Werte der Eigenschaft schalten an drei voneinander unabhängigen Stellen: ob Leerraumfolgen zusammengefasst werden, ob Zeilenumbrüche aus dem Quelltext erhalten bleiben und ob am Zeilenende automatisch umbrochen wird. Aus diesen drei Ja-Nein-Fragen ergeben sich die Werte, und wer sie in dieser Form liest, muss sich keine Tabelle merken: nowrap schaltet allein den automatischen Umbruch ab, pre allein das Zusammenfassen und den automatischen Umbruch, pre-wrap nur das Zusammenfassen.

Umbrüche steuern, ohne die Eigenschaft anzufassen

Für einzelne Stellen ist die Eigenschaft zu grob. Soll eine Zahl mit ihrer Einheit zusammenbleiben oder ein Name nicht zwischen Vor- und Nachnamen getrennt werden, genügt ein geschütztes Leerzeichen an genau dieser Stelle. Umgekehrt markiert das Element für eine mögliche Umbruchstelle einen Punkt, an dem ein langes Wort getrennt werden darf, und ein weiches Trennzeichen tut dasselbe und setzt zusätzlich einen Bindestrich, wenn dort tatsächlich umbrochen wird.

Für lange Zeichenketten ohne jede Trennmöglichkeit – eine Adresse, ein Prüfwert, ein zusammengesetztes Wort – gibt es eigene Eigenschaften: die eine erlaubt den Umbruch innerhalb eines Wortes nur dann, wenn es sonst überliefe, die andere erzwingt ihn immer. Die erste ist fast immer die richtige, weil sie den Text nur dort antastet, wo es nötig ist. Und für eine echte Silbentrennung braucht es beides: die Angabe der Sprache am Dokument und die Eigenschaft, die sie einschaltet – ohne die Sprachangabe weiß der Browser nicht, nach welchen Regeln er trennen soll.

Die späteren Werte

CSS 2.1 kennt fünf Werte; zwei kamen später hinzu und schließen die Lücken. pre-line fasst Leerraum wie gewohnt zusammen, behält aber die Zeilenumbrüche aus dem Quelltext – der passende Wert für Text, den jemand in ein Formularfeld getippt hat und dessen Absätze erhalten bleiben sollen, ohne dass die Einrückung des Quelltextes mit ausgegeben wird. break-spaces verhält sich wie pre-wrap, lässt aber auch nach Leerzeichen am Zeilenende umbrechen, statt sie über den Rand hinausragen zu lassen.

Beide sind heute überall verfügbar. Für neue Arbeiten lohnt außerdem ein Blick auf die zwei getrennten Eigenschaften, in die das Modul die Sammeleigenschaft zerlegt hat: eine für das Zusammenfassen des Leerraums und eine für den Umbruch. Damit lassen sich die drei Fragen von oben einzeln beantworten, statt aus sieben Kombinationen die passende auszuwählen.

Was mit dem Tabulator geschieht

Ein Tabulator im Quelltext ist im Normalfall nichts weiter als Leerraum und wird mit allem daneben zu einem Leerzeichen zusammengefasst. Bleibt der Leerraum dagegen erhalten, muss der Browser entscheiden, wie breit ein Tabulator ist. CSS 2.1 sagt dazu nichts; überliefert sind acht Zeichen, was in eingerücktem Quelltext zu sehr breiten Stufen führt.

Eine spätere Eigenschaft stellt die Breite ein und nimmt entweder eine Anzahl von Zeichen oder eine Länge entgegen. Für dargestellten Quelltext sind zwei oder vier Zeichen die übliche Wahl. Wer die Einrückung nicht dem Zufall überlassen will, wandelt sie beim Erzeugen der Seite in Leerzeichen um – dann ist die Breite unabhängig von jeder Einstellung.

Wann welches

• Code, der exakt bleiben soll: pre mit scrollendem Wrapper.
• Code oder Gedichte, die umbrechen dürfen: pre-wrap.
• Nutzereingaben mit Zeilenumbrüchen, ohne Einrückungen: pre-line.
• Kurze Beschriftungen, die zusammenbleiben müssen: nowrap – sparsam.

Häufige Fragen