Die hyphensEigenschaft steuert die Silbentrennung von Text in Elementen auf Blockebene. Sie können verhindern, dass eine Silbentrennung auftritt, sie zulassen oder nur zulassen, wenn bestimmte Zeichen vorhanden sind.
Beachten Sie, dass dies hyphenssprachempfindlich ist. Die Fähigkeit, Unterbrechungsmöglichkeiten zu finden, hängt von der Sprache ab, die im langAttribut eines übergeordneten Elements definiert ist. Es werden noch nicht alle Sprachen unterstützt, und die Unterstützung hängt vom jeweiligen Browser ab.
Syntax
p ( hyphens: none | manual | auto )Bindestriche: keine
Wörter werden bei Zeilenumbrüchen niemals getrennt, selbst wenn Zeichen innerhalb des Wortes darauf hinweisen, wohin die Silbentrennung gehen könnte oder sollte.
Bindestriche: manuell
Wörter werden nur bei Zeilenumbrüchen unterbrochen, wenn das Wort Zeichen enthält, die auf Zeilenumbrüche hinweisen. Es gibt zwei Zeichen, die eine Zeilenumbruchmöglichkeit vorschlagen:
U+2010(HYPHEN): Das Zeichen „harter“ Bindestrich weist auf eine sichtbare Zeilenumbruchmöglichkeit hin. Auch wenn die Linie zu diesem Zeitpunkt nicht unterbrochen ist, wird der Bindestrich dennoch gerendert. Wörtlich ein "-".U+00AD(SHY): ein unsichtbarer, „weicher“ Bindestrich. Dieser Charakter wird nicht sichtbar wiedergegeben. Stattdessen wird ein Ort vorgeschlagen, an dem der Browser das Wort bei Bedarf brechen kann. In HTML können Sie-einen weichen Bindestrich einfügen.
Bindestriche: auto
Wörter können an geeigneten Silbentrennungspunkten unterbrochen werden, entweder wie durch Silbentrennungszeichen (siehe oben) innerhalb des Wortes bestimmt oder wie automatisch durch eine sprachgerechte Silbentrennungsressource bestimmt (sofern dies vom Browser unterstützt oder über bereitgestellt wird @hyphenation-resource).
Bedingte Silbentrennungszeichen in einem Wort haben, falls vorhanden, Vorrang vor automatischen Ressourcen, wenn Silbentrennungspunkte innerhalb des Wortes bestimmt werden.
Bindestriche: alle
Veraltet, nicht verwenden . Dies war nur in der Spezifikation vorübergehend zum Testen.
Demo
Die Demo unten enthält eine Reihe von Absätzen und alles soll hyphens: auto;das Konzept der Silbentrennung demonstrieren. Das langAttribut wird für endas übergeordnete Element festgelegt.
Browser-Unterstützung
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrom | Feuerfuchs | IE | Kante | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4,2-4,3 * |
Safari 5+ erfordert -webkit-, Firefox 6+ erfordert -moz-, IE 10+ erfordert -ms-, iOS 4.2+ erfordert -webkit-.
Chrome <55 und Android-Browser unterstützen tatsächlich -webkit-hyphens: noneden Standardwert, aber keinen der anderen Werte.
In Firefox und Internet Explorer funktioniert die automatische Silbentrennung nur für einige Sprachen (definiert mit dem langAttribut). In diesem Hinweis finden Sie eine umfassende Liste der unterstützten Sprachen.
Wenn Sie ein webbasiertes Dokument schreiben, das wirklich eine Silbentrennung benötigt, können Sie Hyphenator.js verwenden, eine Bibliothek, die auf einem umfangreichen Wörterbuch basiert und automatisch weiche Bindestriche und Leerzeichen mit einer Breite von Null in Ihren Inhalt einfügt.
Ohne JavaScript müssen Sie sich auf beides verlassen hyphensund word-wrap:
.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )