Was ist eingentlich… white-space?

Salopp ausgedrückt geht es dabei um Abstände. Wo sind sie, welche werden berücksichtigt und wie werden sie umgesetzt. Und das können wir selbstverständlich definieren. Das white-space-Attribut wird meistens vernachlässigt – dabei lassen sich damit viele praktische Dinge umsetzen! Welche, damit befassen wir uns in diesem Artikel und in unseren Kursen.

 

Wo bleibt der Abstand?

Meistens nehmen wir es als selbstverständlich hin („das ist nun einmal so“): Text wird auf der Webseite so angezeigt, dass so viele Worte in eine Zeile gepackt werden, wie sich eben in einer Zeile ausgehen, die nächsten springen in die nächste Zeile um. Wenn wir aber einen Blick in das HTML-Dokument werfen, sieht es dort ganz anders aus. Die Zeilenumbrüche, die im HTML-Dokument stehen, werden von der Webseite nicht berücksichtigt. Das ist auch gut so; der Grund dahinter ist, dass der Developer sich den Text so formatieren kann, dass er in das Fenster seines Developer-Tools passt – diese Zeilenumbrüche sollen aber keinesfalls auf die Website übernommen werden.

Daher funktionieren Textabstände grundsätzlich einmal so, dass eine beliebige Kombination von Leerzeichen, Tabstopps und Returns im HTML-Dokument als nur ein Textabstand auf der Webseite umgesetzt werden.

Beispiel:

HTML-File:



Ansicht im Browser[1]:





Ich will, dass meine Formatierung übernommen wird!

Unter gewissen Umständen kann es aber erwünscht sein, dass die gesetzten Zeilenumbrüche und/oder Tabstopps erhalten bleiben, beispielsweise bei Codestellen. Dafür haben wir mehrere Möglichkeiten.

<br>-Tag

Wir können im HTML-Code <br>-Tags setzen, um einen Zeilenumbruch zu erzeugen (br für break bzw. linebreak, also Zeilenumbruch).

 

HTML:




Ansicht im Browser:





<pre>-Tag

Ein <pre>-Tag ist für vorformatierten („preformatted“) Text gedacht. Innerhalb eines <pre>-Tags werden alle Leerzeichen, Tabstopps und Returns genauso übernommen, wie sie im HTML-File stehen. Der Unterschied zum <br>-Tag: Beim <br>-Tag wird nur dort ein Zeilenumbruch vorgenommen, wo das <br>-Tag im HTML-Dokument gesetzt ist; beim <pre>-Tag werden alle Zeilenumbrüche, Tabstopps und Leerzeichen wiedergegeben.

 

HTML:














Ansicht im Browser:





Hier werden tatsächlich alle Zeichen berücksichtigt: Auch die Einrückung innerhalb des <pre>-Tags und das Return zwischen dem Punkt und dem schließenden </pre>-Tag.

 

…oder white-space!

Dieses Verhalten können wir auch über eine CSS-Anweisung erreichen: white-space: pre;

 

HTML:





Ansicht im Browser:




Offensichtlich besteht doch ein kleiner Unterschied zum <pre>-Tag: Hier wird auch das Return zwischen öffnendem <p>-Tag und erstem Buchstaben übernommen.

 

Bisher haben wir Container verwendet, deren Breite sich dem Inhalt angepasst hat. Whitespaces können aber auch und gerade dann interessant werden, wenn wir einen Container mit einer fixen Breite haben.

Für das nächste Beispiel bekommt unser Paragraph also eine fixe Breite von 200px. Er ist also zu klein für seinen Inhalt, daher springen die Worte in die nächste Zeile um (solange der Container keine fixe Höhe hat!).

 

HTML:





Anzeige im Browser:





Meistens erwarten wir genau dieses Verhalten von unseren Textabschnitten. In manchen Fällen möchten wir vielleicht aber das Umspringen in die nächste Zeile verhindern.

 

white-space: nowrap

Mit der CSS-Anweisung white-space: nowrap verhindern wir genau dieses Umspringen in die nächste Zeile. Das führt allerdings dazu, dass sich der Text in der Breite des Containers nicht mehr ausgeht!

 

HTML:





CSS:





Anzeige im Browser:




Deshalb wird die Angabe white-space: nowrap normalerweise mit einer weiteren Angabe kombiniert, die festlegt, was mit dem Überlauf passieren soll, beispielsweise overflow: hidden. Mit dieser Angabe würde alles, was sich innerhalb des Paragraphen nicht mehr ausgeht, abgeschnitten werden:

 

HTML:





CSS:




Anzeige im Browser:





Das lässt sich auch hervorragend mit text-overflow kombinieren. Wenn beispielsweise eine Bildunterschrift oder sonstiger Text sich nicht in der Breite ausgeht, können, statt eines harten Abreißens, Punkte eingefügt werden, um anzuzeigen, dass der Text hier noch weitergeht. Das sieht dann etwa so aus:

 

HTML:




CSS:




Anzeige im Browser:





white-space: pre-wrap

Auch eine Mischform gibt es: white-space: pre-wrap. Dabei werden die exakten Zeilenumbrüche oder Tabstopps übernommen, wie bei „pre“; allerdings dürfen auch Zeilenumbrüche hinzugefügt werden, wenn sich der Text innerhalb des Containers nicht mehr ausgeht.

 

HTML:






CSS:





Anzeige im Browser:





white-space: pre-line

Schließlich gibt es noch die Anweisung white-space: pre-line. Auch dabei handelt es sich um eine Mischform der bereits erzielten Ergebnisse. Werden im HTML-Dokument Returns gesetzt, so werden diese übernommen; das Return zwischen dem öffnenden Tag und dem ersten Buchstaben wird angezeigt; andere white-spaces (Tabstopps und Mehrfachleerzeichen) werden jedoch ignoriert.

 

HTML:




CSS:





Anzeige im Browser:






Die Werte, die white-space zugewiesen werden können noch im Überblick:

normal

Defaultverhalten

pre

Übernimmt alles so, wie es im HTML-File steht

nowrap

Verhindert einen Zeilenumbruch

pre-wrap

Übernimmt Zeilenumbrüche und Tabstopps, kann aber weitere Zeilenumbrüche einfügen, wenn es sich in der Breite nicht mehr ausgeht

pre-line

Übernimmt Zeilenumbrüche, ignoriert aber Tabstopps und mehrfache Leerzeichen



Viel Spaß beim Ausprobieren!



[1] Der Paragraph hat eine Hintergrund- und Schriftfarbe, ein Padding sowie einen Rahmen, allerdings keine CSS-Anweisungen, die sich auf das Textverhalten beziehen. Die Breite orientiert sich am Inhalt. Beispiel siehe Codepen-Link.



Kommentare sind geschlossen