CSS-Eigenschaft: hyphens
Die hyphens-Eigenschaft definiert, wie Wörter bei einem Zeilenumbruch umgebrochen werden sollen.
Die hyphens-Eigenschaft kann drei Werte annehmen: none, manual, auto. Sie ermöglicht es, die Silbentrennung zu unterbinden oder zuzulassen, oder sie nur dann zu aktivieren, wenn bestimmte Zeichen vorhanden sind.
INFO
Die Regeln der Silbentrennung sind in der Spezifikation nicht explizit definiert, daher variiert die Silbentrennung von Browser zu Browser.
| Anfangswert | none |
|---|---|
| Anwendbar auf | Alle Elemente. |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | Object.style.hyphens = "none"; |
Syntax
Syntax der CSS hyphens-Eigenschaft
hyphens: none | manual | auto | initial | inherit;Beispiel für die hyphens-Eigenschaft:
Beispiel der CSS hyphens-Eigenschaft 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 obigen Beispiel sind alle drei Werte enthalten, um die Unterschiede zu verdeutlichen.
INFO
Browser-Prefixes werden für moderne Browser nicht mehr benötigt.
Zeilenumbruchmöglichkeiten
Mithilfe der beiden folgenden Unicode-Zeichen können wir manuell potenzielle Umbruchstellen im Text festlegen:
U+00AD (SHY/Weiches Bindestrich)
Dieses Zeichen wird unsichtbar gerendert. Es markiert eine Stelle, an der der Browser das Wort umbrechen muss, falls eine Silbentrennung erforderlich ist. Zur Einfügung eines SHY verwenden Sie .
U+2010 (HYPHEN/Hartes Bindestrich)
Dieses Zeichen zeigt eine sichtbare Umbruchmöglichkeit an. Der Bindestrich wird auch dann gerendert, wenn die Zeile an dieser Stelle nicht umgebrochen wird.
Werte
| Wert | Beschreibung |
|---|---|
| none | Keine Silbentrennung. Wörter werden bei Zeilenumbrüchen nicht getrennt, auch wenn die Zeichen auf Umbruchstellen hindeuten. |
| manual | Wörter werden nur für den Zeilenumbruch getrennt, wenn Umbruchmöglichkeiten innerhalb des Wortes vorhanden sind. Wörter werden nur an ‐ oder ­ getrennt. |
| auto | Der Browser trennt Wörter automatisch an geeigneten Silbentrennstellen. Die Trennung erfolgt dort, wo der Algorithmus dies entscheidet. Das Verhalten des Werts auto hängt von der Sprache ab. |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Praxis
Was ist der Zweck der 'hyphens'-Eigenschaft in CSS?