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:
<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:
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:
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:
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:
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:
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:
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:
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.