HTML Zeilenumbrüche und Kommentare

HTML zeigt Texte so an wie wir sie schreiben. Naja, zumindest meistens. Zeilenumbrüche passieren meist automatisch am Zeilenende, wenn der Platz ausgeht – und das hängt oft an der Bildschirmbreite. Manchmal brauchen wir ein wenig Kontrolle über die Darstellung unserer Texte und hier kommt der gezwungene HTML Zeilenumbruch (der <br>-Tag) ins Spiel

Zeilenumbruch in HTML

Wenn du in HTML einen Zeilenumbruch einfügen möchtest, kannst du das mit dem <br>-Tag tun. Der Begriff „br“ steht für „break“, was so viel bedeutet wie „Umbruch“. Hier ein paar Beispiele:

Beispiel 1: Einfacher Umbruch

<p>Dies ist ein Text. <br> Und hier beginnt die neue Zeile.</p>

Häufig stoßen wir auf verschiedene Formulierungen für denselben Vorgang, ob es nun „html umbruch“, „html neue zeile“ oder „br html“ genannt wird. Die Essenz bleibt gleich: Du willst in deinem HTML-Code einen Zeilenumbruch erzwingen.

Beispiel 2: Mehrfacher Zeilenumbruch

<p>Erste Zeile. <br><br> Dritte Zeile, nach einem leeren Absatz.</p>

Manchmal wird dieser Befehl als „html umbruch erzwingen“ oder „html nächste zeile“ bezeichnet. Der <br>-Tag ist selbsterklärend und benötigt keine zusätzlichen Attribute.

HTML Zeilenumbruch (<br>) in einem Absatz (<p>)

Der Begriff „p br“ verbindet zwei wesentliche HTML-Tags: <p> für Absatz und <br> für Zeilenumbruch. Wenn du beide kombinierst, hast du einen Absatz mit einem oder mehreren Zeilenumbrüchen.

Beispiel 3: Kombination von <p> und <br>

<p>Das ist der erste Abschnitt. <br> Und hier beginnt die zweite Linie desselben Absatzes.</p>

HTML Zeilenumbruch verhindern

Es gibt Zeiten, in denen wir genau das Gegenteil wollen: Wir möchten verhindern, dass der Text in unserem HTML-Code automatisch umbrochen wird. Dies kann besonders nützlich sein, wenn wir bestimmte Textelemente oder Worte zusammenhalten möchten, ohne dass sie durch den automatischen Zeilenumbruch des Browsers getrennt werden.

Das nowrap Attribut

In der Frühzeit von HTML konnte das nowrap Attribut in Verbindung mit dem <td>-Tag (Tabellenzelle) verwendet werden, um einen automatischen Zeilenumbruch innerhalb der Zelle zu verhindern.

<td nowrap>Dieser Text wird nicht umbrochen, egal wie lang er ist.</td>

Allerdings ist das nowrap Attribut in modernen HTML5-Spezifikationen als veraltet markiert und sollte vermieden werden.

CSS: Die moderne Methode

Der empfohlene Weg, einen Zeilenumbruch in der heutigen Webentwicklung zu verhindern, ist die Verwendung von CSS. Das white-space CSS-Attribut bietet hier verschiedene Optionen:

• nowrap: Dieser Wert verhindert Zeilenumbrüche und lässt den Text über das Container-Element hinauslaufen.
• pre: Dieser Wert behält sowohl Leerzeichen als auch Zeilenumbrüche bei, so wie sie im HTML-Code geschrieben wurden.
• pre-wrap: Dieser Wert behält Zeilenumbrüche und Leerzeichen bei, erlaubt jedoch zusätzliche Zeilenumbrüche durch den Browser.
• pre-line: Dieser Wert behält Zeilenumbrüche bei, aber zusammenhängende Leerzeichen werden zu einem Einzelnen reduziert.

Das häufigste Szenario, um Zeilenumbrüche zu verhindern, ist die Verwendung von white-space: nowrap.

.no-wrap {
    white-space: nowrap;
}

Und im HTML:

<p class="no-wrap">Dieser Text wird nicht umbrochen, egal wie lang er ist.</p>

HTML Kommentare

Abseits von Zeilenumbrüchen gibt es Momente, in denen du vielleicht Notizen oder Kommentare in deinem HTML-Code hinterlassen möchtest, die nicht im Browser angezeigt werden. Hier kommt der Kommentartag ins Spiel.

<!-- Das ist ein Kommentar und wird nicht angezeigt. -->