Sie sind hier: Startseite -> CSS-Grundlagen -> Absatzformatierung -> Zeilenumbruch

CSS-Grundlagen: Zeilenumbruch mit white-space

Zeilenumbruch: CSS-gesteuerter Umbruch

Wie geht CSS im Rahmen eines Absatzes eigentlich mit dem Zeilenumbruch um? Viele setzen sich mit der Frage nicht auseinander und akzeptieren die normalen Einstellungen, manchmal kann es aber nützlich sein, den Umbruch zu steuern. CSS bietet dafür den Befehl white-space an.

White-space kennt drei Einstellung. Normal ist eine, die man gar nicht verwenden müsste, denn sie ist die Normaleinstellung bei der Verarbeitung von Text. Das bedeutet, dass mehrere Leerzeichen hintereinander zu einem Leerzeichen zusammengefasst werden. Ein Zeilenumbruch erfolgt dann, wenn das Ende des umgebenden Elements erreicht ist, beispielsweise ein Div oder meist ein Absatz ergo Paragraph (P-Tag).

Pre ist eine zweite Möglichkeit, den Zeilenumbruch mit CSS zu steuern. Hier wird der Zeilenumbruch nur durchgeführt, wenn es auch tatsächlich einen entsprechenden Tag gibt.

Nowrap ist die dritte Möglichkeit von white-space, bei der der Zeilenumbruch generell verhindert wird, außer es gibt den BR-Tag, der für einen Umbruch steht.

ergibt:

width:200px; white-space: normal;
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

width:200px; white-space: pre;
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
(Bewusster Umbruch mit br />)
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

width:200px; white-space: nowrap;
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
(Bewusster Umbruch mit br />)
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Ebenfalls interessant:

Einzug

Informationen über den CSS-Befehl text-indent, mit dem die erste Zeile eines Absatzes via CSS eingezogen oder ausgerückt werden kann.

[aktuelle Seite]

Zeilenumbruch

Informationen über den CSS-Befehl white-space, mit dem der Zeilenumbruch eingestellt werden kann.

Zeilenabstand

Informationen über den CSS-Befehl line-height, mit dem der Zeilenabstand in einem Text via CSS eingestellt werden kann.

Vertikale Ausrichtung

Informationen über den CSS-Befehl vertical-align, mit dem Text auf einer Webseite vertikal angepasst werden kann.

Horiz. Ausrichtung

Informationen über die horizontale Ausrichtung mit CSS durch den CSS-Befehl text-align.

Zurück zum Hauptthema

Übersicht Absatzformatierung

Startseite CSS-Grundlagen