CSS white-space • tab-size • Leerzeichen und Tabulator

Abstände zwischen Zeichen und Wörtern

Mit der CSS-Eigenschaft white-space verhält sich der Text wie HTML pre. Leerzeichen und Zeilenumbrüche so wiedergeben, wie sie im Quelltext gesetzt sind.

Wenn der Browser mehrere Leerzeichen nacheinander und Zeilenumbrüche so wiedergeben soll, wie der Autor sie setzt, springt entweder ein HTML pre-Tag ein oder die CSS-Eigenschaft white-space.

HTML pre ist ein Block-Tag, erzeugt einen Zeilenumbruch am Anfang und am Ende und der Text läuft unerbittlich bis zum Zeilenumbruch im Quelltext. CSS white-space kann inline-Passagen auf einen gewollten Abstand bringen, während der Text insgesamt je nach Platzangebot automatisch umbricht.

<p>Lorem ipsum dolor sit amet, <span  style="white-space: pre">consectetur      1790     elit</span>.

<pre>Lorem ipsum dolor sit amet, consectetur      1790     elit. Praesent leo quam, ultricies ut,  ultricies interdum.</pre>

Für ein gleichmäßiges Vergrößern oder Verkleinern des Raums zwischen aufeinander folgenden Wörtern / Zeichen hingegen gibt es CSS word-spacing und CSS letter-spacing.

white-space Werte

Erblich: Ja

white-space

steuert den Weißraum innerhalb eines Elements.

Werte

normal | pre | nowrap | pre-wrap | pre-line | inherit

normal

ist die Standardeinstellung.

pre

verhält sich wie das HTML-Tag <pre>. Ein Zeilenumbruch mittels br-Tag ist nicht erforderlich, Zeilen werden so umgebrochen, wie sie im Markup umgebrochen werden.

pre-wrap

verhindert, dass der Browser aufeinander folgende Leerzeichen ignoriert. Zeilen werden so umgebrochen, wie sie im Quelltext umgebrochen werden.
Anders als in pre-Tags läuft eine Textzeile mit dem CSS-Stil white-space: pre-wrap nicht über die Breite hinaus, die durch width festgelegt ist.
Bei generierten Inhalten werden Zeilen durch ein \A umgebrochen und Zeilen werden so umgebrochen, dass Boxen wie gewohnt gefüllt werden.

pre-line

lässt aufeinanderfolgende Leerzeichen wie gewohnt kollabieren, aber bei generierten Inhalten erzeugt \A einen Zeilenumbruch.

nowrap

lässt den Text auf einer Zeile laufen, bis der Text beendet ist oder ein HTML-Tag <br> entdeckt wird. <br> erzeugt einen Zeilenumbruch auf die nächste Zeile.

CSS Tabulatoren: tab-size

Textbearbeitungsprogramme setzen Text mit Hilfe von Tabularoren in Spalten und ersparen dem Benutzer aufwändige Tabellen oder Grids. Tabulatoren waren zwar in HTML und CSS oft vorgesehen, wurden aber immer sofort wieder unter den Teppich gekehrt.

Per Vorgabe wird der Tabulator in HTML-Elementen als einzelnes Leerzeichen umgesetzt, aber in HTML pre setzten die Browser ein Tab mit 8 Leerzeichen um. Erst CSS3 tab-size steuert die Anzeige von Tabs in HTML pre. Auswirkung hat tab-size allerdings nur in HTML pre und HTML-Elementen mit CSS white-space:pre.

.atab {
	tab-size:30; 
	white-space: pre;
}
…
<p class="atab">
	Schulte-Deliz	Martina	1480
	Gördeler	Heinrich	2750
	Hinrichs	Frank	3289
</p>

Schulte-Deliz Martina 480 Dresden Gördeler Heinrich 2750 Stuttgart Hinrichs Frank 31289 Rüdesheim

Warum beginnen die Zeilen nicht am linken Rand? Weil schon das p-Tag um 1 Tab eingerückt ist, der Text unterhalb um ein weiteres Tab. Der Text ist also um 2 x 8 Leerzeichen nach rechts eingerückt.