Typografie/Zeilenumbruch

10min

leicht

Grundkenntnisse in
• HTML
• CSS

Es gibt mehrere Möglichkeiten, das Verhalten von Text bei einem Zeilenumbruch zu steuern.

HTML

• inhaltlich bedingter Zeilenumbruch
  • br-Element

• impliziter Zeilenumbruch
  • wbr-Element, ­

• geschützte Leerzeichen
  •  

• geschützte Bindestriche
  • ‑

CSS

• Anzeige von Leerzeichen und Zeilenumbrüchen kontrollieren
  • white-space-Eigenschaft

• Zeilenumbruch erzwingen
  • Zeilenumbruch erzwingen

• automatische Silbentrennung
  • hyphens-Eigenschaft

Zeilenumbruch mit bestimmten Zeichen beeinflussen

Geschützte Leerzeichen

Sie können verhindern, dass bei einem Leerzeichen ein automatischer Zeilenumbruch erfolgen darf. Dazu nutzen Sie anstelle des normalen Leerzeichens, das Sie mit der Leertaste erhalten, ein geschütztes Leerzeichen.

Beispiel ansehen …

<h1>Es gibt vieles, worin sich HTML&nbsp;2.0 und HTML&nbsp;4.0 unterscheiden.</h1> <p> (Versuchen Sie zur Kontrolle einmal, das Anzeigefenster so schmal zu machen, dass der Text des obigen Satzes bei "HTML 2.0" oder "HTML 4.0" umgebrochen wird.) </p>

Die Zeichenfolge   erzeugt ein geschütztes Leerzeichen (nbsp = non-breaking space = Leerzeichen ohne Umbruch). Die Zeichenfolge ist die benannte Zeichenreferenz für das Unicode-Zeichen U+00A0. Es wird wie ein gewöhnliches Leerzeichen angezeigt, doch an dieser Stelle kann kein Zeilenumbruch erfolgen. Das Zeichen kann natürlich auch direkt eingefügt werden, aber wie auch bei anderen unsichtbaren oder schwer unterscheidbaren Zeichen empfehlen wir, es als Zeichen-Referenz zu notieren.

Umbruch nach Bedarf

Web-Browser brechen Text normalerweise nur bei Leerzeichen um, weil durch Leerzeichen Wörter voneinander abgegrenzt werden. Sie können explizit weitere Stellen markieren, an denen er den Text umbrechen darf. Sinnvoll ist dies bei langen Wörtern. Dies gilt für alle Absatzarten in HTML.

Beachten Sie bitte die Browserhinweise am Ende dieses Abschnitts.

Beispiel ansehen …

<h1>Langes Wort mit bedingtem Umbruch</h1> <h2>Bedingte Trennung mit <wbr></h2> <p>Donaudampfschifffahrts<wbr>kapitänsmütze Donaudampfschifffahrts<wbr>kapitänsmütze ...</p> <h2>Bedingte Trennung mit &shy;</h2> <p>Donaudampfschifffahrts&shy;kapitänsmütze Donaudampfschifffahrts&shy;kapitänsmütze ...</p> <h2>Bedingte Trennung mit &#200B;</h2> <p>Donaudampfschifffahrts&#200B;kapitänsmütze Donaudampfschifffahrts&#200B;kapitänsmütze ...</p>

<wbr> (engl. word break, Wort-Umbruch) bewirkt einen optionalen Umbruch, fügt jedoch keinen Trennstrich ein. Diese Art des Umbruchs eignet sich zum Beispiel für lange URLs.

­ (engl. soft hyphen, weiches Trennzeichen) fügt das Unicode-Zeichen U+00AD ein. Dieses Zeichen wird vom Browser normalerweise nicht angezeigt, markiert aber eine Stelle, an der getrennt werden darf, falls das Wort bei der Bildschirmanzeige am Ende der Zeile steht und der Platz für eine vollständige Darstellung nicht mehr ausreicht. Der Browser sollte das Wort an dieser Stelle mit einem Umbruch trennen und einen Trennstrich einfügen.

Das Zeichen &#200B (Nullbreite Leerstelle) stellt für den Browser Leerraum dar, an dem er einen Umbruch durchführen darf. Nullbreite Leerstellen werden in einigen ostasiatischen Sprachen verwendet, die traditionell keine Leerstellen zwischen die Worte setzen.

­ und ​ sind Zeichen-Referenzen, deshalb können Sie – sofern Sie über die Eingabemöglichkeit oder eine Kopiervorlage verfügen – das Zeichen auch direkt verwenden. Die deutschen Tastaturbelegungen T2 und E1 ermöglichen die direkte Eingabe eines weichen Trennzeichens per AltGr -. Wir raten von dieser Methode jedoch ab, denn solange kein Umbruch stattfindet, ist das Zeichen für den Bearbeiter nicht zu sehen. Das Zeichen ​ wiederum wird nicht von allen Schriftarten unterstützt und kann zur Darstellung eines Kästchens führen.

Beachten Sie: Für ­ war die Browserunterstützung in der Vergangenheit mangelhaft und es kam teilweise sogar zu Fehldarstellungen. Des weiteren beeinträchtigte ­ die Suchfunktionen innerhalb der Browser. In den modernen Browsern sollten diese Probleme überwunden sein.

	<wbr>	&shy;	&#x200B;
	kein Trennstrich		kein Trennstrich
	kein Trennstrich		kein Trennstrich
	kein Trennstrich		kein Trennstrich
	kein Trennstrich		kein Trennstrich

kein Trennstrich bedeutet, dass zwar ein Umbruch erfolgt, jedoch kein Trennstrich sichtbar ist

Zeilenumbruch erzwingen

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>

Siehe auch

• HTML/Tutorials/Textstrukturierung