hyphens

Die hyphens Eigenschaft steuert die Silbentrennung von Text in Block-Level-Elementen. Sie können die Silbentrennung komplett verhindern, zulassen oder nur zulassen, wenn bestimmte Zeichen vorhanden sind.

Beachten Sie, dass hyphens sprachsensitiv ist. Die Fähigkeit, Trennmöglichkeiten zu finden, hängt von der Sprache ab, die im lang Attribut eines übergeordneten Elements definiert ist. Nicht alle Sprachen werden derzeit unterstützt, und die Unterstützung hängt vom jeweiligen Browser ab.

Syntax

.element {
  hyphens: none | manual | auto
}

hyphens: none

Wörter werden niemals an Zeilenumbrüchen getrennt, auch wenn Zeichen innerhalb des Wortes darauf hinweisen, wo eine Trennung erfolgen könnte oder sollte.

hyphens: manual

Wörter werden nur an Zeilenumbrüchen getrennt, an denen sich Zeichen innerhalb des Wortes befinden, die Möglichkeiten zum Zeilenumbruch signalisieren. Es gibt zwei Zeichen, die eine Möglichkeit zum Zeilenumbruch signalisieren:

• U+2010 (HYPHEN): das „harte“ Bindestrich-Zeichen zeigt eine sichtbare Möglichkeit zum Zeilenumbruch an. Auch wenn die Zeile an dieser Stelle nicht tatsächlich umbrochen wird, wird der Bindestrich trotzdem gerendert. Wörtlich ein „-“.
• U+00AD (SHY): ein unsichtbarer, „weicher“ Bindestrich. Dieses Zeichen wird nicht sichtbar gerendert; stattdessen schlägt es eine Stelle vor, an der der Browser das Wort bei Bedarf umbrechen kann. In HTML können Sie &shy verwenden, um einen weichen Bindestrich einzufügen.

hyphens: auto

Wörter können an geeigneten Silbentrennungspunkten umbrochen werden, entweder wie durch Trennungszeichen (siehe oben) im Wort bestimmt oder automatisch durch eine sprachlich passende Trennungsressource (falls vom Browser unterstützt oder über @hyphenation-resource bereitgestellt).

Bedingte Trennungszeichen innerhalb eines Wortes haben Vorrang vor automatischen Ressourcen bei der Bestimmung von Trennpunkten innerhalb des Wortes.

hyphens: all

Veraltet, nicht verwenden. Dies war nur vorübergehend im Standard enthalten, um zu testen.

Demo

Die untenstehende Demo enthält eine Reihe von Absätzen und alles ist auf hyphens: auto; eingestellt, um das Konzept der Silbentrennung zu demonstrieren. Das lang Attribut ist auf dem übergeordneten Element auf en gesetzt.

Browser-Unterstützung

Safari 5+ erfordert -webkit-, Firefox 6+ erfordert -moz-, IE 10+ erfordert -ms-, iOS 4.2+ erfordert -webkit-.

Chrome < 55 und der Android-Browser unterstützen tatsächlich -webkit-hyphens: none, was der Standardwert ist, aber keine der anderen Werte.

In Firefox und Internet Explorer funktioniert die automatische Silbentrennung nur für einige Sprachen (definiert mit dem lang Attribut). Siehe diesen Hinweis für eine umfassende Liste der unterstützten Sprachen.

Wenn Sie ein webbasiertes Dokument schreiben, das dringend eine Silbentrennung benötigt, können Sie Hyphenator.js verwenden, eine Bibliothek, die auf einem umfangreichen Wörterbuch basiert und automatisch weiche Bindestriche und Nullbreiten-Leerzeichen in Ihren Inhalt einfügt.

Ohne JavaScript müssen Sie sich auf hyphens und word-wrap verlassen.

.hyphenate {
  word-wrap: break-word;
  overflow-wrap: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}

Weitere Informationen

• Silbentrennung im Standard
• Silbentrennung bei MDN
• Wortumbruch/Silbentrennung mit CSS von Kenneth Auchenberg
• Der „aktuelle“ Stand der Silbentrennung im Web von David Newton

Verwandt