In vielen geschriebenen Sprachen ist es möglich, Zeilenumbrüche zwischen Silben und Wörtern zu setzen. Dies geschieht oft, damit mehr Zeichen in eine Textzeile passen und so weniger Zeilen in einem Textfeld benötigt werden, was Platz spart. In diesen Sprachen wird die Unterbrechung visuell durch einen Bindestrich (-) gekennzeichnet.
Das CSS Text Module Level 3 definiert die Eigenschaft „hyphens“, mit der gesteuert wird, wann und wie Bindestriche angezeigt werden. Ab Version 55 wird in Chrome die Eigenschaft „hyphens“ implementiert.
Gemäß der Spezifikation hat das Attribut „hyphens“ drei Werte: none, manual und auto. Dazu verwenden wir einen weichen Bindestrich (­), wie im folgenden Beispiel.
Google ipsum dolor sit amet, consectetur adipiscing e­lit.
Ein weich gesetzte Trennstrich wird nur angezeigt, wenn er am rechten Rand steht. Wie dieser Bindestrich in Chrome 55 oder höher dargestellt wird, hängt vom Wert der CSS-Property hypens ab.
-webkit-hyphens: manual;
hyphens: manual;
In Kombination ergibt sich so ein Ergebnis:
Der Bindestrich ist nicht sichtbar. Wenn ein Wort mit dem weichen Bindestrich auf eine einzige Zeile passt, ist der Bindestrich in jedem Fall unsichtbar. Sehen wir uns nun an, wie sich die drei Werte für Bindestrich verhalten.
Keine verwendet
Im ersten Beispiel ist das Attribut „Bindestriche“ auf none festgelegt. Dadurch wird verhindert, dass der Bindestrich angezeigt wird. Sie können das überprüfen, indem Sie die Fenstergröße so anpassen, dass das Wort „elit“ nicht in die sichtbare Textzeile passt.
Manuell
Im zweiten Beispiel ist das Attribut „Bindestriche“ auf manual festgelegt. Das bedeutet, dass der Bindestrich nur angezeigt wird, wenn das Wort „elit“ am Rand umgebrochen wird. Sie können das auch überprüfen, indem Sie die Fenstergröße anpassen.
Automatische Option verwenden
Im dritten Beispiel ist das Attribut „Bindestriche“ auf auto festgelegt. In diesem Fall ist kein Bindestrich erforderlich, da der User-Agent die Bindestriche automatisch bestimmt. Wenn Sie die Größe des Fensters ändern, sehen Sie, dass der Browser in diesem Beispiel an derselben Stelle wie im zweiten Beispiel einen Bindestrich setzt, obwohl kein Bindestrich vorhanden ist. Wenn Sie das Fenster weiter verkleinern, sehen Sie, dass Ihr Browser Zeilenumbrüche zwischen beliebigen zwei Silben im Text setzen kann.