Bindestriche mit CSS verwalten

Joe Medley
Joe Medley

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:

Einzeiliger Screenshot

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.

Google ipsum dolor sit amet, consectetur adipiscing elit.

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.

Google ipsum dolor sit amet, consectetur adipiscing elit.

„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.

Google ipsum dolor sit amet, consectetur adipiscing elit.