CSS Zeilenumbruch mit white-space

Veränderte Zeilenbreite des Textes erwirken

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.

Damit kann man ganz andere Gestaltungsmöglichkeiten erwirken, wenn der Platz nicht vollständig ausgenutzt wird, sondern kürzere Zeilen entstehen und damit das Leseerlebnis verändert wird.

Zeileumbruch mit CSS und white-space steuern

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.

Lesen Sie auch

Mit CSS lassen sich die Texte sehr schön formatieren und man kann die gesamte Seite mit den Abständen und den Textfluss aufbauen, aber es geht noch mehr. Eine wichtige Thematik ist die Absatzformatierung, bei der vertikale und horizontale Ausrichtung ebenso möglich ist wie auch der Zeilenumbruch und damit bewusst kürzere Zeilenlängen oder die Zeilenhöhe.

Das nächste Thema bei den Formatierungen mit CSS betrifft den Rahmen. Der Rahmen ist häufig ein optisches Werkzeug, um Inhalt hervorzuheben oder zu strukturieren und man kann in CSS viele Formatierungen wählen wie der Typ der Linie, die Farbe oder auch die Rahmenstärke.

Ebenfalls interessant sind die Gestaltungsmöglichkeiten bei den Listen. Sie können bei den Abständen individuell eingestellt werden und man kann bei der ungeordneten Liste sogar ein eigenes Bild als Aufzählungszeichen wählen.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel