CSS/Anwendung und Praxis/Zeilenumbruch erzwingen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Einen Zeilenumbruch vor oder nach Fluss-Elementen können Sie relativ leicht erzwingen. Erstellen Sie dazu ein before- bzw. after Pseudoelement und geben diesem als Inhalt einen Zeilenumbruch. Damit dieser auch angezeigt wird, muss die white-space-Eigenschaft den Wert nowrap haben.

Beachten Sie: Wählen Sie diese Variante des Zeilenumbruchs nur, wenn die Umbrüche allein aus gestalterischen Gründen erfolgen sollen.

Für Zeilenumbrüche in Gedichten sind br-Elemente die richtige Wahl.

  • Android
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Erzwungener Zeilenumbruch</title>
    <style>
        .before::before, .after::after {
            content: "\A";
            white-space: pre;
        }
    </style>
  </head>
  <body>
    <h1>Erzwungener Zeilenumbruch mit CSS</h1>
    <main>
        <p>Nach diesem <span class="after">Wort</span> soll ein Zeilenumbruch erfolgen.</p>
        <p>Vor diesem <span class="before">Wort</span> soll ein Zeilenumbruch erfolgen.</p>
    </main>
  </body>
</html>
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML