Wiki-Workshop 02.04.2022 16:00 - 21:00

Wir laden zu einem Online-Workshop (über Discord) ein. Dieser richtet sich ausdrücklich auch an Newbies und Interessierte! Jede(r) ist herzlich willkommen!

CSS/Tutorials/Zeilenumbruch

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
10min
Schwierigkeitsgrad
leicht
Vorausgesetztes Wissen
Grundkenntnisse in
HTML
CSS

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

HTML
  • geschützte Leerzeichen
  • geschützte Bindestriche
    • &#x2011;

CSS

Zeilenumbruch mit bestimmten Zeichen beeinflussen[Bearbeiten]

Geschützte Leerzeichen[Bearbeiten]

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 &nbsp; 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 ist es empfehlenswert, diese als Zeichen-Referenz zu notieren.

Bedingter Trennstrich[Bearbeiten]

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 <code>&amp;shy;</code></h2> <p>Donaudampfschifffahrts&shy;kapitänsmütze Donaudampfschifffahrts&shy;kapitänsmütze ...</p> <h2>Bedingte Trennung mit <code>&amp;#x200B;</code></h2> <p>Donaudampfschifffahrts&#x200B;kapitänsmütze Donaudampfschifffahrts&#x200B;kapitänsmütze ...</p>

<wbr> (engl. word break, Wort-Umbruch) bewirkt einen optionalen Umbruch, fügt jedoch keinen Trennstrich ein.

&shy; (engl. soft hyphen, weiches Trennzeichen) markiert 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.

Statt &shy; und &#x200B; lassen sich auch die Zeichen U+00AD und U+200B direkt eingeben, da sie ebenso wie &nbsp; Zeichen-Referenzen sind.

Da &shy; ja nur eine Zeichen-Entität-Referenz darstellt, kann man es bei den Deutschen Standard-Tastaturbelegungen E1 und T2 per <kdb>AltGr</kbd> - direkt eingeben.[1] Als Alternative wäre (Zero-Width Space = Leerzeichen ohne Breite) denkbar, da bei Leerzeichen grundsätzlich ein Umbruch erfolgen darf. Allerdings erzeugt auch dieses Zeichen keinen Trennstrich und es ist nicht in jeder Schriftart enthalten, was dann zur Darstellung eines Kästchens führt.

Beachten Sie: Für &shy; war die Browserunterstützung in der Vergangenheit mangelhaft und es kam teilweise sogar zu Fehldarstellungen. Des Weiteren beeinträchtigt(e) &shy; die Suchfunktionen innerhalb der Browser.
<wbr> &shy; &#x200B;
Cross.gif
erkennt Element, trennt nicht
Tick.gif
 
Tick.gif
kein Trennstrich
Tick.gif
kein Trennstrich
Tick.gif
 
Tick.gif
kein Trennstrich
Tick.gif
kein Trennstrich
Tick.gif
 
Tick.gif
kein Trennstrich
Tick.gif
kein Trennstrich
Tick.gif
 
Tick.gif
kein Trennstrich
Tick.gif
kein Trennstrich
Tick.gif
 
Tick.gif
kein Trennstrich

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

Zeilenumbruch erzwingen[Bearbeiten]

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>

Quellen[Bearbeiten]

  1. Wikipedia: Bedingter_Trennstrich#Darstellung_auf_Computersystemen

Siehe auch[Bearbeiten]