CSS: Leerzeichen und Absätze so darstellen wie im HTML Code

Normalerweise werden Absätze im HTML Code völlig ignoriert und Leerzeichen nur dann dargestellt, wenn sie sinnvoll zwischen zwei Elementen wie zum Beispiel zwischen Wörtern oder Bildern trennen.

In diesem Zusammenhang ist die CSS Eigenschaft "white-space" interessant, die diesen Zustand aufheben kann. Immer dann, wenn man einen Text so ausgeben möchte, wie er zum Beispiel im HTML-Editor angezeigt wird, kann man white-space nutzen.

<p style="white-space:normal">Diese Zeile verhält sich ganz normal 
wie in HTML üblich.</p>
<p style="white-space:nowrap">Diese Zeile wird nicht umgebrochen.</p>
<p style="white-space:pre">Diese Zeile wird mit allen Zeilenumbrüchen 
und Leerzeichen genauso dargestellt wie im Quelltext.</p>

Die Eigenschaft "normal" führt dazu, dass sich der Text genauso verhält, wie immer und wie in HTML allgemein üblich. Zeilenumbrüche im Quellcode, die im Editor sichtbar sind werden also nicht angezeigt und mehrere Leerzeichen zu einem zusammengefasst.

Die Eigenschaft "nowrap" führt zu dem Verhalten, dass der gesamte Text in eine Zeile geschrieben wird (außer man bestimmt mit HTML Tags wie zum Beispiel <br> selber, wo ein Zeilenumbruch erscheinen soll). Wenn also zum Beispiel das Browser-Fenster zu klein wird und der Text normalerweise umgebrochen würde, wird der Text mit "nowrap" trotzdem in einer Zeile gehalten, so dass man vertikal im Browser scrollen muss, um den gesamten Text lesen zu können.

Mit der Eigenschaft "pre" schließlich erreichen Sie, dass der Text genauso angezeigt wird, wie auch im Quellcode. Wenn Sie also mehrere Leerzeichen verwenden um den Text zu positionieren oder aber Zeilenumbrüche zwischen den Worten haben, wird dieser auch im Browser übernommen, auch wenn diese unter  normalen Umständen nicht angezeigt werden würden. Sinnvoll ist dies zum Beispiel, wenn Sie eine ganze Datei mit Quellcode einfügen möchten und der Code genauso angezeigt werden soll, wie er in der Datei steht.

Weitere Eigenschaften von white-space

Weitere Eigenschaften von white-space sind "pre-wrap" und "pre-line". Mit "pre-wrap" ist das Verhalten so wie mit "pre", es wird aber umgebrochen, wenn die Breite nicht ausreichend ist, um alles anzuzeigen. Der Zeilenumbruch bei "pre-line" ist so wie bei "pre-wrap" aber mehrere Leerzeichen hintereinander werden zu einem Leerzeichen zusammen gefasst, so wie es auch ansonsten üblich ist.