CSS hyphens-Eigenschaft
Erfahren Sie, wie die CSS-Eigenschaft hyphens Wörter trennt. Lernen Sie die Eigenschaftswerte kennen und sehen Sie Beispiele.
Die CSS-Eigenschaft hyphens steuert, wie Wörter mit Bindestrichen getrennt werden, wenn Text in eine neue Zeile umbricht. Silbentrennung bedeutet, ein langes Wort an einer sinnvollen Stelle zu trennen und am Zeilenende einen Bindestrich (-) einzufügen, damit der Text schmale Spalten gleichmäßiger füllt, anstatt große Lücken zu lassen oder ein einzelnes langes Wort überlaufen zu lassen.
Diese Seite behandelt die drei Werte der Eigenschaft (none, manual und auto), die Rolle des lang-Attributs, die weichen und harten Bindestriche, die manuell eingefügt werden können, sowie den Zusammenhang von hyphens mit anderen Textumbruch-Eigenschaften.
Warum und wann hyphens verwendet werden sollte
Silbentrennung ist vor allem in engen Containern wichtig – Seitenleisten, mobile Layouts, mehrspaltige Texte oder Elemente mit kleiner width. Ohne Silbentrennung kann ein einzelnes nicht trennbares Wort (eine lange URL, ein chemischer Name, ein deutsches Kompositum) entweder über seinen Rahmen hinausragen oder einen unregelmäßigen rechten Rand mit unschönen Leerzeichen erzeugen. Mit hyphens: auto kann der Browser solche Wörter an gültigen Stellen trennen und sorgt dafür, dass Blocksatz oder enger Text ordentlich aussieht.
hyphens wird typischerweise zusammen mit text-align: justify eingesetzt oder wenn Inhalte vom Benutzer generiert werden und Wortlängen nicht vorhersehbar sind.
hyphens: auto funktioniert nur, wenn die Sprache des Elements bekannt ist. Legen Sie sie mit dem lang-Attribut fest (zum Beispiel <html lang="en">), da der Browser das Silbentrennungswörterbuch der Sprache benötigt, um Trennpunkte zu bestimmen. Ohne lang verhält sich auto wie manual.
Die Regeln der Silbentrennung sind in der Spezifikation nicht explizit festgelegt, daher können die genauen Trennpunkte von Browser zu Browser variieren.
| Anfangswert | none |
|---|---|
| Anwendbar auf | Alle Elemente. |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | Object.style.hyphens = "none"; |
Syntax
Syntax der CSS-Eigenschaft hyphens
hyphens: none | manual | auto | initial | inherit;Beispiel der hyphens-Eigenschaft:
Beispiel der CSS-Eigenschaft hyphens mit den Werten none, manual und auto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
width: 55px;
border: 1px solid #666;
}
p.none {
hyphens: none;
}
p.manual {
hyphens: manual;
}
p.auto {
hyphens: auto;
}
</style>
</head>
<body>
<h2>Hyphens property example</h2>
<h3>none</h3>
<p class="none">An extreme­ly lengthy sentence</p>
<h3>manual</h3>
<p class="manual">An extreme­ly lengthy sentence</p>
<h3>auto</h3>
<p class="auto" lang="en">An extreme­ly lengthy sentence</p>
</body>
</html>Ergebnis
Im gezeigten Beispiel sind alle drei Werte enthalten, um die Unterschiede zu verdeutlichen.
Browser-Präfixe sind für moderne Browser nicht mehr erforderlich.
Zeilenumbruchmöglichkeiten
Mithilfe der zwei folgenden Unicode-Zeichen können wir manuell potenzielle Zeilenumbruchpunkte innerhalb des Textes definieren:
U+00AD (SHY/Weiches Trennzeichen)
Dieses Zeichen wird unsichtbar dargestellt. Es markiert eine Stelle, an der der Browser das Wort trennen soll, wenn eine Silbentrennung notwendig ist. Zum Einfügen von SHY verwenden Sie .
U+2010 (HYPHEN/Hartes Trennzeichen)
Dieses Zeichen kennzeichnet eine sichtbare Zeilenumbruchmöglichkeit. Der Bindestrich wird auch dann angezeigt, wenn die Zeile an dieser Stelle nicht umbrochen wird.
Werte
| Wert | Beschreibung |
|---|---|
| none | Keine Silbentrennung. Wörter werden an Zeilenumbrüchen nicht getrennt, auch wenn die Zeichen Trennpunkte andeuten. |
| manual | Wörter werden nur dann für den Zeilenumbruch getrennt, wenn sich Trennmöglichkeiten innerhalb des Wortes befinden. Wörter werden nur bei ‐ oder ­ getrennt. |
| auto | Der Browser trennt Wörter automatisch an geeigneten Trennpunkten. Wörter werden dort getrennt, wo der Algorithmus es entscheidet. Das Verhalten des Wertes auto hängt von der Sprache ab. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Verwandte Textumbruch-Eigenschaften
hyphens ist eine von mehreren CSS-Eigenschaften, die bestimmen, wo und wie Text umbrechen kann. Sie werden häufig kombiniert eingesetzt:
- overflow-wrap — erlaubt dem Browser, ein langes Wort nur dann zu trennen, wenn es sonst seinen Container überlaufen würde, ohne dabei einen Bindestrich einzufügen.
- word-break — steuert, ob Wörter zwischen beliebigen Zeichen getrennt werden können (nützlich für CJK-Text oder lange Zeichenketten).
- word-wrap — der veraltete Alias von
overflow-wrap. - white-space — bestimmt, ob Leerzeichen zusammengefasst werden und ob Text überhaupt umbricht.
- line-break — verfeinert die Zeilenumbruchregeln, hauptsächlich für asiatische Sprachen.
Verwenden Sie hyphens, um Bindestriche an gültigen Trennpunkten einzufügen, und overflow-wrap / word-break als Sicherheitsnetz für Zeichenketten ohne gültige Silbentrennpunkte.
Browser-Unterstützung
hyphens: auto wird von allen modernen Browsern unterstützt. Ältere Versionen von Safari und Edge vor Chromium erforderten Hersteller-Präfixe (-webkit-hyphens, -ms-hyphens), die für aktuelle Browser jedoch nicht mehr benötigt werden.