Leerzeichen und Zeilenumbrüche

Normalerweise werden mehrere Leerzeichen im Quellcode ignoriert und zu einem Leerzeichen zusammengefasst. Enthält ein Element Texte, dann werden diese automatisch am Zeilenende an den Trennstellen umgebrochen und in der nächsten Zeile fortgeführt. Zu den Trennstellen zählen auch die Leerzeichen. Es kann manchmal sinnvoll sein, den Zeilenumbruch zu verhindern, z.B. wenn man Code darstellt und durch den Zeilenumbruch die Übersichtlichkeit verloren geht.

Das Verhalten bei Leerzeichen und Zeilenumbrüchen kann über die Eigenschaft white-space beeinflusst werden. Nachfolgend ist ein Beispielcode, mit dem der Text des betreffenden Elements nicht umgebrochen wird.

Werte für white-space

Für white-space können die folgenden Werte angegeben werden.

normal (Standardwert, mehrere Leerzeichen im Quellcode werden zusammengefasst, Zeilenumbruch automatisch)
pre (Darstellung wie es im Quellcode angegeben wurde, wie beim PRE-Tag)
nowrap (Zusammenfassung mehrerer Leerzeichen, Zeilenumbruch nur über <br>)
pre-wrap (Leerzeichen werden nicht zusammengefasst, Zeilenumbruch wie im Quellcode, mit <br> oder am Zeilenende)
pre-line (Zusammenfassung mehrerer Leerzeichen, Zeilenumbruch wie im Quellcode, mit <br> oder am Zeilenende)
initial (Setzt auf den Standardwert)
inherit (Vererbt vom Elternelement)

Nachfolgend sind ein paar Beispielcodes und die Abbildungen von der Darstellung im Browser.

Beispiel mit dem Wert pre

.selektor {
white-space: pre;
}

p {
margin: 2px;
padding: 5px;
width: 300px;
font-size: 18px;
border: 1px solid #001055;
}

<p class="selektor">Text ohne automatischen Zeilenumbrüchen.
Es sei denn, sie sind im Quellcode
oder werden über &lt;br&gt;<br>erzwungen.
Mehrere Leerzeichen       werden angezeigt.</p>

Beispiel mit dem Wert nowrap

.selektor {
white-space: nowrap;
}

p {
margin: 2px;
padding: 5px;
width: 300px;
font-size: 18px;
border: 1px solid #001055;
}

<p class="selektor">Text ohne automatischen Zeilenumbrüchen.<br>
Zeilenumbrüche im Quellcode 
werden ignoriert.<br>
Sie müssen mit &lt;br&gt;<br>erzwungen werden.<br>
Mehrere Leerzeichen       werden zusammengefasst.</p>

Beispiel mit dem Wert pre-wrap

.selektor {
white-space: pre-wrap;
}

p {
margin: 2px;
padding: 5px;
width: 300px;
font-size: 18px;
border: 1px solid #001055;
}

<p class="selektor">Text mit automatischen Zeilenumbrüchen.
Zeilenumbrüche im Quellcode 
oder mit &lt;br&gt;.<br>
Mehrere Leerzeichen       werden angezeigt.</p>

Beispiel mit dem Wert pre-line

.selektor {
white-space: pre-line;
}

p {
margin: 2px;
padding: 5px;
width: 300px;
font-size: 18px;
border: 1px solid #001055;
}

<p class="selektor">Text mit automatischen Zeilenumbrüchen.
Zeilenumbrüche im Quellcode 
oder mit &lt;br&gt;.<br>
Mehrere Leerzeichen       werden zusammengefasst.</p>

Wie man an den Beispielbildern erkennen kann, können Texte über den Rand des Elements hinausragen. In solchen Fällen kann es hilfreich sein, mit der Eigenschaft overflow automatisch Scrollleisten einblenden zu lassen. Sonst kann es passieren, dass die hinausragenden Texte andere Elemente überlagern.