Diesen Artikel teilen
Infos zum Artikel
Artikel-Thema: CSS Zeilenumbruch mit white-space erreichen
Beschreibung: Mit dem Befehl 👍 white-space in CSS kann man einen ✅ Zeilenumbruch steuern und damit auch die vorgesehene Breite eines Textes ändern.
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.
Webhosting mit viel Software bei Alfahosting (Affiliate-Link)
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.
Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)
Die Textformatierung ist bei CSS neben der Positionierung eine Hauptaufgabe, weil gefälliger Text einfach eher angenommen wird und einen Mehrwert darstellt. Man darf es nicht übertreiben, aber man kann sich damit sich auch einmal spielen und ein wenig die Reaktionen überprüfen. Wichtig ist einmal die grundsätzliche Einstellung der Schriftart und Schriftgröße.
Dann kommen Befehle, die sehr häufig benötigt werden. Dazu gehört font-weight für die Fettschrift, alternativ und nicht so häufig wird man font-style für kursiv nutzen. Sehr oft braucht man color für die Textfarbe und text-decoration speziell bei der Gestaltung und Auszeichnung der Links.
Und dann gibt es noch weitere Einstellungen wie den Abstand von Buchstaben und Wörter, den Schatten oder auch die Textumwandlung und die Schriftvariante.
Themenseiten
Artikel-Thema: CSS Zeilenumbruch mit white-space erreichen
Beschreibung: Mit dem Befehl 👍 white-space in CSS kann man einen ✅ Zeilenumbruch steuern und damit auch die vorgesehene Breite eines Textes ändern.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel