HTML/Textauszeichnung/br

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das Element br, break, eng. Umbruch erzeugt einen Zeilenumbruch.

  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0
  • HTML5

Text innerhalb von normalen Absätzen, Listen, sowie in Überschriften oder Tabellenzellen wird vom Web-Browser bei der Anzeige automatisch umgebrochen. Sie können jedoch an einer gewünschten Stelle einen Zeilenumbruch erzwingen, indem Sie ein <br> einfügen. Dabei ist es egal, ob das alleinstehende Tag am Ende der vorherigen Zeile steht, oder in einer eigenen Zeile, oder am Anfang der folgenden Zeile.

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Zeilenumbruch erzwingen</title> </head> <body> <h1>Problem</h1> <p> Es flog ein Stein so weit, so weit –<br> und hatte doch kein Federkleid!<br> Es war ihm ja zu gönnen.<br> Indessen rechte Seltsamkeit,<br> dass Steine fliegen können! </p> <p> Christian Morgenstern<br> (1871-1914) </p> </body> </html>
Beachten Sie: Wenn Sie XHTML-standardkonform arbeiten, müssen Sie das br-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <br />.

Das br-Element sollte ausschließlich für Zeilenumbrüche, die Bestandteil des Inhalts sind, genutzt werden. Beispiele für die korrekte Anwendung sind Zeilenumbrüche in Gedichten oder Adressen.

[Bearbeiten] Zeilenumbruch mit bestimmten Zeichen beeinflussen

[Bearbeiten] Geschützte Leerzeichen

  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 3.2
  • XHTML 1.0
  • HTML5

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.

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Geschützte Leerzeichen</title> </head> <body> <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> </body> </html>

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.

[Bearbeiten] Bedingter Trennstrich

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.

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Zeilenumbruch erlauben</title> <style> p { font-size: 300%; } </style> </head> <body> <h1>Langes Wort mit bedingtem Umbruch</h1> <h2>Bedingte Trennung mit <code><wbr></code></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> </body> </html>

<wbr> (wbr = word break = Umbruch innerhalb eines Wortes) bewirkt einen optionalen Umbruch, fügt jedoch keinen Trennstrich ein.

Mit &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.

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

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. Siehe SELFHTML-Aktuell: Bedingter Zeilenumbruch mit »Soft Hyphen« nun auch in Firefox


<wbr> &shy; &#x200B;
  • IE 88
Cross.gif
 
Tick.gif
 
Tick.gif
kein Trennstrich
  • IE 9+9+
Cross.gif
erkennt Element, trennt nicht
Tick.gif
 
Tick.gif
kein Trennstrich
Opera 7.10
  • Opera 1414
Tick.gif
 
fehlerhaft
  • Opera 15+15+
Tick.gif
kein Trennstrich
Tick.gif
 
Tick.gif
kein Trennstrich
  • Firefox
Tick.gif
kein Trennstrich
Tick.gif
 
Tick.gif
kein Trennstrich
  • Safari
Tick.gif
kein Trennstrich
Tick.gif
 
Tick.gif
kein Trennstrich
  • Chrome
Tick.gif
kein Trennstrich
Tick.gif
 
Tick.gif
kein Trennstrich

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

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Hilfe
SELFHTML
Diverses
Werkzeuge
Flattr
Soziale Netzwerke