In vielen Schriftsprachen ist es möglich, die Grenzen zwischen Silben und Wörtern zu trennen. Dies geschieht häufig, um mehr Zeichen in einer Textzeile zu platzieren, um weniger Zeilen im Textbereich zu haben und so Platz zu sparen. In solchen Sprachen wird die Unterbrechung visuell mit einem Bindestrich („-“) gekennzeichnet.
CSS-Textmodulebene 3 definiert eine Bindestriche-Eigenschaft, mit der festgelegt wird, wann und wie Bindestriche Nutzern angezeigt werden. Ab Version 55 wird die Bindestriche in Chrome implementiert.
Gemäß der Spezifikation hat das Attribut „Bindestrich“ drei Werte: none
, manual
und auto
. Zur Veranschaulichung verwenden wir einen weichen Bindestrich (­
), wie im folgenden Beispiel dargestellt.
Google ipsum dolor sit amet, consectetur adipiscing e­lit.
Ein weicher Bindestrich wird nur dann angezeigt, wenn er am unteren Rand auftritt. Wie dieser Bindestrich in Chrome 55 oder höher gerendert wird, hängt vom Wert der CSS-Eigenschaft hypens
ab.
-webkit-hyphens: manual;
hyphens: manual;
Wenn Sie diese kombinieren, erhalten Sie ein Ergebnis wie dieses:
Beachten Sie, dass der weiche Bindestrich nicht sichtbar ist. Wenn ein Wort mit einem weichen Bindestrich in eine einzelne Zeile passt, ist der Bindestriche immer unsichtbar. Sehen wir uns an, wie sich alle drei Werte eines Bindestrichs verhalten.
Keine verwenden
Im ersten Beispiel ist das Attribut „Bindestrich“ auf none
festgelegt. Dadurch wird verhindert, dass der weiche Bindestrich angezeigt wird. Sie können dies überprüfen, indem Sie die Fenstergröße so anpassen, dass das Wort "elit" nicht in die sichtbare Textzeile passt.
Manuelle Auswahl
Im zweiten Beispiel ist die Bindestriche-Eigenschaft auf manual
gesetzt. Das bedeutet, dass der weiche Bindestrich nur angezeigt wird, wenn der Rand das Wort „elit“ umbricht. Auch hier können Sie dies bestätigen, indem Sie die Fenstergröße anpassen.
„Automatisch“ wird verwendet
Im dritten Beispiel ist das Attribut „Bindestrich“ auf auto
festgelegt. In diesem Fall ist kein weicher Bindestrich erforderlich, da der User-Agent die Position von Bindestrichen automatisch bestimmt. Wenn Sie die Größe des Fensters ändern, sehen Sie, dass der Browser dieses Beispiel an derselben Stelle wie im zweiten Bindestrich schreibt, obwohl kein weicher Bindestrich vorhanden ist. Wenn Sie das Fenster weiter verkleinern, werden Sie feststellen, dass Ihr Browser die Zeilen zwischen zwei beliebigen Silben im Text umbrechen kann.