HTML <br> / <wbr> • Zeilenumbruch erzwingen (break)
Per Vorgabe laufen Texte bis zum Ende der Zeile und brechen dann automatisch zu einer neuen Zeile um. HTML br erzwingt einen Zeilenumbruch und ist äquivalent zu einem Linefeed (Zeilenvorschub, in der Textverarbeitung meist durch ShiftEnter).
Neue Zeile oder ein neuer Absatz?
Zeilenumbrüche innerhalb des HTML-Markups in Block-Elementen wie p, li, td oder dd werden von den Browsern ignoriert.
Ein Zeilenumbruch im Quelltext
Ein Zeilenumbruch im Quelltext führt nicht zu einem Zeilenumbruch in der gerenderten Darstellung (eine Ausnahme bildet der Text innerhalb von pre-Tags.
<br> – erzwungener Zeilenumbruch
In den meisten Fällen wird das br-Tag in Elementen wie p, td oder li nicht benötigt, um Textzeilen umzubrechen – das erledigt der Browser entsprechend der verfügbaren Zeilenbreite automatisch. Die Darstellung ist auch unabhängig von der Strukturierung des HTML-Quelltexts: Hier lehnt sich HTML an die Textverarbeitungsprogramme an. address-Elemente hingegen sind ein logischer Block mit mehreren Zeilen. Die einzelnen Zeilen in p-Elemente zu setzen wäre falsch.
<address>
<strong>mediaevent.de</strong><br>
Moers<br>
<a href="mailto:kontakt@email.de">kontakt@email.de</a>
</address>
HTML br wirkt wie die Tastaturkombination ShiftEnter in Textverarbeitungsprogrammen, die ebenfalls einen Zeilenumbruch ohne neuen Absatz einfügen. Anders als das Beenden und Öffnen eines neuen p-, h1 oder li-Tags führt das br-Tag nicht zu einer Änderung des Absatzformats.
Nur wenn der Textfluss innerhalb eines Absatzes an einer bestimmten Stelle umbrochen werden soll – z.B. beim HTML-Tag address oder in Gedichten – sind br-Tags erforderlich. Alternativ kann der CSS-Stil white-space: pre-wrap eingesetzt werden, um den Text wie im Quelltext umzubrechen.
Das br-Tag ist leer (void) und muss nicht durch einen Schrägstrich vor der schließenden spitzen Klammer geschlossen werden.
br-Tag: Zeilenumbruch im Gedicht
Ein harter Zeilenumbruch wird in Texten wie Adressen, Gedichten oder Liedern eingesetzt.
<h6>Ein Gedicht <br /> von Edward Gorey</h6> <p> Als es klingelte, nachts, es war kurz vor halb zehn. <br> Wurde niemand erwartet und niemand gesehen. <br> Doch dann sahn sie auf einer Urne zuletzt <br> eine fremde Erscheinung und waren entsetzt. </p>
Ein Gedicht
von Edward Gorey
Als es klingelte, nachts, es war kurz vor halb zehn.
Wurde niemand erwartet und niemand gesehen.
Doch dann sahn sie auf einer Urne zuletzt
eine fremde Erscheinung und waren entsetzt.
Ein br-Tag passt auch zu Beschriftungen, kurzen Hinweisen und Formularen.
<label> Name<br> <input type="text"> </label>
Unsichtbarer Zeilenumbruch mit <wbr> vs ­
Für lange Komposita (zusammengesetzte Wörter) hat HTML das wbr-Tag aufgenommen, bei dem die Browser einen Zeilenumbruch (ohne Silbentrennstrich) einsetzen, während ­ für einen optionalen Zeilenumbruch mit Trennstrich steht.
Donaudampf­schiff­fahrts­gesellschaft
wbr steht für einen optionalen Zeilenumbruch, den die Browser nur dann einsetzen sollen, wenn eine Zeichenkette zu lang wird. Anders als beim HTML-Entity ­ setzen die Browser bei <wbr> keinen Silbentrennstrich.
Das wbr-Tag ist nützlich für lange Links in Klartext, die nicht durch zusätzliche Trennstriche verfälscht werden sollen.
Zu den wichtigsten Funktion in Javascript gehört die XML<wbr>Http<wbr>Request-<wbr>Methode DNS (oder englisch DNA für deoxyribonucleic acid) steht für Des­oxy­ribo­nukle­in­säure.
HTML ist nicht nur das Markup für Webseiten, sondern auch für eBooks nach dem ePub-Standard. Dort wird eher noch eine manuelle Kontrolle durchgeführt, um für ein gutes Leseverständnis zu sorgen.
Automatische Silbentrennung und CSS overflow-wrap
Die automatische Silbentrennung (CSS hyphens) bringt einen ordentlichen Randausgleich, wenn nur die Sprache im html-Tag korrekt eingesetzt wird.
<html lang="de">
hyphens: auto; hyphenate-limit-chars: auto 5; hyphenate-limit-lines: 2;
Aber die Silbentrennung ist kein Mittel gegen langen Zeichenfolgen wie in URLs, denn hier dürfen keine Trennstrichen eingefügt werden. Ein weiteres Sicherheitsnetz wird mit overflow-wrap aufgespannt: CSS overflow-wrap erzwingt das automatische Umbrechen langer Wörter an einer beliebigen Stelle auf eine neue Zeile.
.url {
max-width: 360px;
background: #efefef;
overflow-wrap: break-word;
margin: auto;
}
CSS overflow-wrap ersetzt <wbr> und ­ nicht, erlaubt dem Browser nur, ein Wort umzubrechen, wenn es sonst über den Rand laufen würde, damit es nicht zu einem Layoutbruch kommt. Für Fließtext heute typisch:
p {
hyphens: auto;
overflow-wrap: break-word;
}
Wofür <br> nicht gedacht ist
Eingabefelder mit ihren label-Elemente in einzelne Zeilen zu setzten
<p><label for=""></label><input type=""><br> <label for=""></label><input type=""></p>
Besser ein p oder div-Element nutzen, damit der Screenreader nach der Zeile eine kleine Pause macht, und der Zuhörer merkt, dass hier ein weiteres Eingabefeld vorliegt.
<p><label for=""></label><input type=""></p> <p><label for=""></label><input type=""></p>
Genauso wenig sollte ein br-Tag für eine Leerzeile als bloßer Abstandhalter eingesetzt werden. Der Abstand ist besser im CSS aufgehoben.
Kein CSS für br
br hält sich an die Eigenschaft des umfassenden Absatz – gleich, ob das br in einem p-, li, div oder dd-Absatz sitzt. Wenn der Zeilenumbruch einen anderen Abstand zur letzten Zeile mitbringen soll, ist ein neues Block-Element angebracht und kein br-Tag.
Er trank Fruchtsaft zum Frühstück und wirkte leicht irr;
denn er aß nicht nur Toast, sondern Tafelgeschirr.
Selbst den Grammophontrichter (er liebte ihn sehr)
gab trotz aller Proteste er keinem mehr her.
.demo-br br { margin-top: 2em; display: block; padding-top:20px }
Im großen und ganzen verweigern die Browser (außer Firefox) das Ändern der Abstände anhand von margin oder padding, nur line-height zeigt Wirkung.
