HTML <wbr>-Tag
Der HTML <wbr>-Tag markiert eine Zeilenumbruchmöglichkeit: einen Punkt, an dem ein langes Wort oder eine URL bei Bedarf umbrechen kann.
Der HTML-Tag <wbr> (Word BReak opportunity) markiert eine Stelle im Text, an der der Browser optional einen Zeilenumbruch einfügen darf, wenn die Zeile sonst überlaufen würde. Er erzwingt keinen Umbruch — er fügt lediglich die Möglichkeit hinzu, dort umzubrechen. Wenn das Wort auf die Zeile passt, gibt <wbr> nichts aus.
Dies unterscheidet sich vom <br>-Tag, der immer einen Zeilenumbruch erzwingt. Bei <wbr> bricht der Browser nur dann um, wenn er eine lange, nicht trennbare Zeichenkette wie eine URL, einen Dateipfad oder ein sehr langes Wort umbrechen muss.
Der <wbr>-Tag gehört zu den HTML5-Elementen.
Warum <wbr> verwenden?
Standardmäßig brechen Browser Zeilen an Leerzeichen und Bindestrichen um. Eine lange Zeichenkette ohne Leerzeichen — eine URL, ein Dateipfad, ein Hash oder ein extrem langes Wort — hat keinen natürlichen Umbruchpunkt, sodass der Browser eines von zwei unerwünschten Dingen tut:
- Er lässt die Zeichenkette über den Rand ihres Containers hinausragen, was zu horizontalem Überlauf führt, oder
- er bricht die Zeichenkette an einer ungünstigen, schwer lesbaren Stelle um.
Das Platzieren von <wbr> an sinnvollen Stellen teilt dem Browser mit: „Hier ist eine sichere Stelle, um diese Zeichenkette umzubrechen, wenn kein Platz mehr vorhanden ist." Die Umbrüche erscheinen nur bei Bedarf, sodass die Zeichenkette auf einem breiten Bildschirm unverändert bleibt.
Eine lange URL umbrechen — der häufigste Anwendungsfall
Eine lange URL ohne Leerzeichen ist der klassische Anwendungsfall für <wbr>. Fügen Sie nach Schrägstrichen oder Punkten ein <wbr> ein, damit der Link in einer schmalen Spalte sauber umbrechen kann, anstatt überzulaufen:
<p style="width: 220px; border: 1px solid #ccc; padding: 8px;">
Read it here:
https://<wbr>www.w3docs.com<wbr>/learn-html<wbr>/html-wbr-tag
</p>Auf einem breiten Bildschirm bleibt die URL in einer Zeile, aber im obigen 220px-Container bricht sie nur an den von Ihnen erlaubten <wbr>-Punkten um.
<wbr> für ein langes Wort
<wbr> hilft auch bei einem einzelnen, extrem langen Wort. Vergleichen Sie einen Absatz mit und ohne Umbruchmöglichkeiten:
<p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
<p>This is the longest word you can ever meet in the English language pneumono<wbr>ultra<wbr>micro<wbr>scopic<wbr>silico<wbr>volcano<wbr>coniosis</p>Der erste Absatz kann seinen Container überlaufen; der zweite kann sauber zwischen Silben umbrechen, wenn der Platz ausgeht.
<wbr> vs. ­ vs. CSS
<wbr> ist eine von mehreren Möglichkeiten, den Textumbruch zu steuern. Jede verhält sich anders, wählen Sie also das richtige Werkzeug:
| Technik | Was sie bewirkt | Zeigt einen Bindestrich? |
|---|---|---|
<wbr> | Markiert eine Umbruchmöglichkeit im Markup. Bricht nur bei Bedarf um. | Nein |
­ (weiches Trennzeichen) | Markiert eine Umbruchmöglichkeit. Bricht nur bei Bedarf um. | Ja — am Umbruch erscheint ein Bindestrich |
CSS overflow-wrap: break-word | Lässt den Browser ein langes Wort an beliebiger Stelle umbrechen, um Überlauf zu vermeiden. | Nein |
CSS word-break: break-all | Erzwingt Umbrüche zwischen beliebigen zwei Zeichen. | Nein |
Wann welches zu wählen ist:
- Verwenden Sie
<wbr>, wenn Sie die richtigen Umbruchpunkte kennen (nach jedem/in einer URL, zwischen Silben) und keinen Bindestrich anzeigen möchten. - Verwenden Sie
­, wenn Sie dieselbe Kontrolle wünschen, aber einen Bindestrich am Umbruch — ideal zum Trennen echter Wörter. - Verwenden Sie CSS
overflow-wrap/word-break, wenn Sie nicht jede Zeichenkette manuell bearbeiten können oder möchten und einfach Überlauf site-weit verhindern müssen. Dies ist in der Regel die bessere Wahl für nutzergenerierte Inhalte, bei denen Sie den Text nicht kontrollieren.
Ein Bindestrich am Zeilenumbruchpunkt wird durch das <wbr>-Element nicht eingefügt. Wenn ein Bindestrich nur am Ende einer umgebrochenen Zeile erscheinen soll, verwenden Sie stattdessen ­ (das Zeichenentität für weiches Trennzeichen).
Beispiel mit Dateipfad
Hier ermöglicht <wbr> einem Windows-Dateipfad, nach jedem Backslash-Segment umzubrechen:
<p>You can find the file by going
C:\user\docs\Letter.txt
</p>Ohne Umbruchmöglichkeiten springt der gesamte Pfad in die nächste Zeile. Das Hinzufügen von <wbr>-Elementen ermöglicht einen sauberen Umbruch:
<p>You can find the file by going C:<wbr>\user<wbr>\docs<wbr>\Files<wbr>\Letter.txt</p>Syntax
Der <wbr>-Tag ist ein leeres Element und hat daher kein schließendes Tag. In XHTML muss er als <wbr/> selbst geschlossen werden.
Vollständiges Beispiel des HTML-Tags <wbr>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Example of a long string of text without wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
<p>Example of a long string of text with wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumono<wbr />ultra<wbr />micro<wbr />scopic<wbr />silico<wbr />volcano<wbr />coniosis</p>
</body>
</html>Ergebnis
Attribute
Das <wbr>-Element hat keine elementspezifischen Attribute. Es unterstützt nur die globalen Attribute und die Ereignisattribute.