Das wbr-Tag
Das Tag wbr gibt eine Stelle an, an der der Browser
bei Bedarf einen Zeilenumbruch durchführen kann
(wenn der Text nicht in die Breite des Elements passt).
Solche Umbrüche werden als weiche Umbrüche bezeichnet.
Benötigt kein schließendes Tag.
Beim Umbruch eines Wortes über das Tag wbr wird das
Trennzeichen "-" nicht hinzugefügt. Wenn
Sie es benötigen - verwenden Sie das weiche
Trennzeichen ­ (das Semikolon
am Ende ist obligatorisch, das ist kein Tippfehler).
Der weiche Umbruch ­ weist
den Browser an einer Stelle an, an der er einen Umbruch
durchführen darf (falls erforderlich), und fügt
dabei das Trennzeichen "-" ein.
Weiche Trennzeichen ­ funktionieren
nicht, wenn die Eigenschaft hyphens
auf den Wert none gesetzt ist (während Umbrüche
mit wbr funktionieren).
Beispiel . Text ohne Umbrüche
Schauen wir uns einen Beispieltext an, in dem es lange Wörter gibt, die über die Grenze des Blocks hinausragen. Wir weisen dem Block eine geringe Breite zu, sodass ein langes Wort nicht hineinpasst:
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Beispiel . Das wbr-Tag
Hier fügen wir nun das Tag wbr an
Stellen hinzu, an denen wir dem Browser empfehlen, einen
Wortumbruch bei Bedarf durchzuführen (beachten Sie,
dass der Browser die Umbrüche nicht überall durchführt,
wo wir sie angegeben haben):
<div id="elem">
this is super<wbr>super<wbr>super<wbr>long text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Beispiel . Das ­ Zeichen
Versuchen wir, anstelle des Tags wbr
das Zeichen ­ zu setzen. An den
Umbruchstellen werden Bindestriche angezeigt:
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Siehe auch
-
das Tag
br,
,
das einen Zeilenumbruch erzwingt -
die Eigenschaft
hyphens,
die echte Silbentrennung festlegt -
die Eigenschaften
word-breakundoverflow-wrap,
die es erlauben, Buchstaben eines langen Wortes umzubrechen -
die Eigenschaft
overflow,
die überstehende Teile eines Blocks abschneidet
