CSS - Silbentrennung
Die hyphens-Eigenschaft
Die CSS-Eigenschaft hyphens wird verwendet, um zu steuern, wie Wörter getrennt werden sollen, wenn Text über mehrere Zeilen umgebrochen wird. Sie gibt dem Browser an, ob und wie Wörter getrennt werden sollen, wenn der Textinhalt umgebrochen wird. Die hyphens-Eigenschaft akzeptiert drei mögliche Werte: none, manual und auto.
Der Standardwert der hyphens-Eigenschaft ist manual, was bedeutet, dass Wörter nur an Zeilenumbrüchen getrennt werden, wo Zeichen innerhalb des Wortes Zeilenumbruchmöglichkeiten andeuten, wie Bindestriche (-), Halbgeviertstriche (–), Geviertstrich (—) oder weiche Trennstriche (­). Wenn die hyphens-Eigenschaft auf none gesetzt ist, werden Wörter nicht an Zeilenumbrüchen getrennt, auch wenn Zeichen innerhalb des Wortes Zeilenumbruchmöglichkeiten andeuten. Wenn die hyphens-Eigenschaft auf auto gesetzt ist, kann der Browser Wörter automatisch an geeigneten Trennstellen trennen, nach seinen eigenen Regeln.
Die hyphens-Eigenschaft wird vererbt, was bedeutet, dass sie, wenn sie für ein übergeordnetes Element festgelegt ist, auch für alle untergeordneten Elemente gilt, es sei denn, sie wird durch eine spezifischere Regel überschrieben.
Der Wert none
Wenn die hyphens-Eigenschaft auf none gesetzt ist, werden Wörter nicht an Zeilenumbrüchen getrennt, auch wenn Zeichen innerhalb des Wortes Zeilenumbruchmöglichkeiten andeuten. Das bedeutet, dass wenn ein Wort zu lang ist, um in die aktuelle Zeile zu passen, es überläuft oder in die nächste Zeile verschoben wird, anstatt getrennt zu werden.
Beispiel: Verwendung des Wertes none
p {
hyphens: none;
}In diesem Code-Snippet setzen Sie <p>-Elemente so, dass sie keine Silbentrennung zulassen, auch wenn es Zeichen in ihnen gibt, die darauf hindeuten.
Der Wert 'manual'
Wenn Sie diesen Wert für 'hyphens' verwenden, werden Wörter nur an Stellen getrennt, an denen es Zeichen gibt, die mögliche Trennstellen andeuten, wie normale oder weiche Bindestriche (Standardeinstellung).
Beispiel: Verwendung des Wertes manual
p {
hyphens: manual;
}Dieser Code setzt <p>-Elemente so, dass sie nur manuelle Trennung basierend auf der Platzierung spezieller Zeichen innerhalb von ihnen zulassen.
Der Wert 'auto'
Wenn Sie diesen Wert für 'hyphens' verwenden, können Browser automatisch geeignete Stellen in jedem einzelnen Fall finden.
Silbentrennung steuern
Neben der hyphens-Eigenschaft bietet CSS weitere Eigenschaften, mit denen Sie das Verhalten der Silbentrennung auf Ihren Webseiten steuern können.
Mit der Eigenschaft hyphenate-character legen Sie das Zeichen fest, das bei der Silbentrennung verwendet wird. Standardmäßig wird das Bindestrich-Zeichen (-) verwendet, Sie können es aber bei Bedarf durch ein beliebiges anderes Zeichen ersetzen.
Beispiel: Trennungszeichen
p {
hyphens: auto;
hyphenate-character: '=';
}Mit der Eigenschaft hyphenate-limit-chars können Sie die Mindestanzahl der Zeichen festlegen, die vor und nach einer Trennstelle vorhanden sein müssen. Sie akzeptiert einen bis drei ganzzahlige Werte, die die Mindestanzahl der Zeichen vor der Trennstelle, nach der Trennstelle und die Mindestlänge des Wortes angeben.
Beispiel: Minimale Zeichenanzahl für Silbentrennung
p {
hyphens: auto;
hyphenate-limit-chars: 5 3 8;
}Die Eigenschaft hyphenate-limit-lines legt fest, wie viele aufeinanderfolgende Zeilen getrennt werden können. Sie akzeptiert einen ganzzahligen Wert.
Beispiel: Maximale Anzahl aufeinanderfolgender Trennungen
p {
hyphens: auto;
hypernate-limit-lines: 2;
}Die Eigenschaft hyphanate-limit-zone definiert, wie viel ungefüllter Platz (auch "Trennungszone" genannt) am Ende einer Zeile übrig bleiben darf, bevor eine Silbentrennung ausgelöst wird. Sie akzeptiert einen Längenwert.
Beispiel: Trennungszone
p {
hyphens: auto;
hyphenate-limit-zone: 8em;
}Dieser Code legt die maximale Trennungszone am Ende der Zeile für <p>-Elemente auf 8em fest.