Zeilenumbrüche

Text innerhalb von normalen Absätzen, Listen, sowie in Überschriften oder Tabellenzellen wird vom Web-Browser bei der Anzeige automatisch umbrochen. Sie können jedoch an einer gewünschten Stelle einen Zeilenumbruch erzwingen.

Beispiel

<h1>Ottos Brief an die Mutter</h1>
<p>Liebe Mama!</p>
<p>Vor drei Wochen habe ich erfahren,<br>
dass Du krank bist.<br>
Mach' Dir keine Sorgen.<br>
Mir geht es gut.</p>

Erläuterung

<br> (br = break = Umbruch) fügt an der gewünschten Stelle einen Zeilenumbruch ein. Dabei ist es egal, ob das alleinstehende Tag am Ende der vorherigen Zeile steht (wie im Beispiel), oder in einer eigenen Zeile, oder am Anfang der folgenden Zeile.

Zeilenumbruch ermöglichen

Web-Browser brechen normalen Fließtext zwar automatisch um, jedoch nur bei Leerraumzeichen, weil dadurch Wörter voneinander abgegrenzt werden. Sie können dem Browser jedoch explizit mitteilen, wo er ebenfalls noch einen Zeilenumbruch einfügen kann. Sinnvoll ist dies beispielsweise für die optionale Trennung sehr langer oder zusammengesetzter Wörter.

Beispiel

<p>Grundstücks&shy;verkehrs&shy;genehmigungs&shy;zuständigkeits&shy;
übertragungs&shy;verordnung<br>
Die Methode <var>document.<wbr>getElements<wbr>ByTagName</var>
</p>

Erläuterung

Zum Markieren eines optionalen Zeilenumbruchs stehen gleich zwei Möglichkeiten zur Verfügung.
Mit dem named Entity &shy; (soft hyphen = bedingter Trennstrich) markieren Sie 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 HTML-Standalone-Tag <wbr> (word break = Umbruch innerhalb eines Wortes) markiert ebenfalls einen optionalen Umbruch, fügt jedoch keinen Trennstrich ein. Es eignet sich also für Umbruchmöglichkeiten, bei denen es sich nicht um die grammatische Worttrennung normaler Wörter handelt.

Weitere Hinweise

Innerhalb von Abschnitten mit verhindertem Zeilenumbruch bewirkt <wbr>, dass an der betreffenden Stelle trotzdem ein Umbruch erfolgen darf. Zeilenumbrüche verhindern können Sie mit CSS verhindern (siehe Textumbruchkontrolle). Aber auch innerhalb von längeren Zeilen innerhalb von präformatierten Bereichen können Sie mit <wbr> an geeigneten Stellen dem Anwender das Quer-Scrollen ersparen.

Das <wbr>-Tag wurde bereits Mitte der 90er Jahre vom damals führenden Web-Browser Netscape 2.0 als proprietäres Sprachelement eingeführt, weshalb es von einigen Browsern schon seit langem erkannt wird. Doch erst mit HTML5 wurde es in den Sprachstandard übernommen.

Weitere Hinweise

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie die Elemente br und wbr in der Form <br /> bzw. <wbr /> notieren.

Referenzinformationen

HTML2 XHTML1 MSIE FFOX CHROME SAF OP
HTML5 XHTML5 FFOX CHROME SAF

Bemerkung zum Internet Explorer: dieser interpretierte das wbr-Element bis einschließlich Version 7. Seit dem standardkonformen Modus des IE8 interpretiert der Browser das Element nicht mehr.

  • Zeichenreferenz shy
HTML 4.01 XHTML 1.0 MSIE FFOX CHROME SAF OP

 


Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.

Sofern nicht anders angegeben, steht der Inhalt dieser Seite unter Lizenz Creative Commons Attribution-ShareAlike 3.0 License