HTML <wbr>-Tag
Das <wbr>-Tag weist den Browser an, wo im Text ein Zeilenumbruch eingefügt werden kann. Im Gegensatz zum <br>-Tag, das den Browser zwingt, einen Zeilenumbruch einzufügen, analysiert der Browser bei Verwendung von <wbr> zunächst den Inhalt und fügt bei Bedarf (z. B. bei zu langen Wörtern oder URL-Adressen) einen Zeilenumbruch ein.
Wenn Sie das <wbr>-Tag nicht verwenden, können lange Wörter entweder an einer falschen Stelle umbrechen (was die Lesbarkeit erschwert) oder gar nicht umbrechen – wodurch das Seitenlayout nach rechts verschoben wird.
Das <wbr>-Tag ist eines der HTML5-Elemente.
DANGER
Ein Bindestrich am Zeilenumbruch wird vom <wbr>-Element nicht automatisch eingefügt. Wenn Sie möchten, dass ein Bindestrich nur am Ende einer Zeile erscheint, verwenden Sie &shy; (Soft-Hyphen-Zeichenentität).
Sie werden dieses Element nicht häufig verwenden. Aber wenn Sie es benötigen, wird <wbr> sehr nützlich sein. Schauen wir uns das folgende Beispiel an, das einen Dateipfad enthält.
HTML <wbr>-Tag
<p>You can find the file by going
C:\user\docs\Letter.txt
</p>Wie Sie sehen können, gibt es keine Umbruchmöglichkeit, und der gesamte Dateipfad wurde in die nächste Zeile verschoben. Wenn Sie <wbr>-Elemente hinzufügen, wird der Dateipfad beim Rendern dieses Absatzes korrekt umgebrochen.
HTML <wbr>-Tag
<p>You can find the file by going C:<wbr>\user<wbr>\docs<wbr>\Files<wbr>\Letter.txt</p>Syntax
Das <wbr>-Tag ist leer, was bedeutet, dass kein schließendes Tag erforderlich ist. In XHTML muss das (<wbr>)-Tag jedoch geschlossen werden (<wbr/>).
Beispiel für das HTML <wbr>-Tag:
HTML <wbr>-Tag
<!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>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.
Praxis
Was ist die Hauptverwendung des <wbr>-Tags in HTML?