hyphens
Übersicht
Die hyphens
Eigenschaft regelt die automatische Silbentrennung. Dazu ist das HTML Attribut lang
, bzw. xml:lang unter XML, zwingend notwendig.
Hinweis: Wie die Silbentrennung umgesetzt wird kann von Browser zu Browser, bzw. von Sprache zu Sprache, variieren.
Initialwert | manual |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Syntax
Werte
none
- Keine Silbentrennung: Wörter werden nicht getrennt und automatische Zeilenumbrüche sind nur bei Leerzeichen möglich.
manual
- Manuelle Silbentrennung: Wörter werden nur dann getrennt, wenn dies definiert wurde (siehe Umbrüche manuell definieren).
auto
- Automatische Silbentrennung: Der Browser trennt die Wörter automatisch. Manuell definierte Umbrüche werden dabei vorgezogen (siehe Umbrüche manuell definieren).
Umbrüche manuell definieren
Es gibt zwei Möglichkeiten, um Wörter manuell zu trennen. Dafür werden die beiden folgenden Unicode-Zeichen verwendet:
- U+2010 (Bindestrich)
- Dieser Bindestrich ist immer sichtbar, auch wenn das Wort gar nicht getrennt werden muss.
- U+00AD (SHY)
- Dieses Zeichen ist unsichtbar und kennzeichnet nur eine mögliche Trennstelle. Sobald eine Trennung notwendig wird, wird ein Bindestrich sichtbar. In HTML lässt sich das Zeichen mit
­
einfügen.
Beispiel
This CSS snippet creates three classes, one for each possible configuration of the hyphens
property.
<ul>
<li><code>none</code>: no hyphen; overflow if needed
<p lang="en" class="none">An extreme­ly long English word</p>
</li>
<li><code>manual</code>: hyphen only at &hyphen; or &shy; (if needed)
<p lang="en" class="manual">An extreme­ly long English word</p>
</li>
<li><code>auto</code>: hyphen where the algo is deciding (if needed)
<p lang="en" class="auto">An extreme­ly long English word</p>
</li>
</ul>
p {
width: 55px;
border: 1px solid black;
}
p.none {
-moz-hyphens: none;
hyphens: none;
}
p.manual {
-moz-hyphens: manual;
hyphens: manual;
}
p.auto {
-moz-hyphens: auto;
hyphens: auto;
}
Spezifikations
Spezifikation | Status | Anmerkung |
---|---|---|
CSS Text Module Level 3 Die Definition von 'hyphens' in dieser Spezifikation. |
Anwärter Empfehlung |
Browser Kompatibilität
BCD tables only load in the browser