CSS/Tutorials/Zeilenumbruch erzwingen
Aus SELFHTML-Wiki
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.
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>
