CSS - Trennzeichen

Leon A. -

Syntax und Verwendung

Die CSS-Eigenschaft hyphens steuert die Silbentrennung von Text in einem Element. Sie akzeptiert drei Werte: none, manual und auto.

  1. none: Dies ist der Standardwert. Wenn auf none gesetzt, ist die Silbentrennung deaktiviert, und Wörter werden nicht getrennt, auch wenn sie den verfügbaren Platz überschreiten.

  2. manual: Wenn auf manual gesetzt, ist die Silbentrennung aktiviert, wird aber nur auf Wörter angewendet, die manuell mit dem weichen Trennzeichen (­) getrennt wurden. Dies ermöglicht eine spezifische Kontrolle darüber, welche Wörter getrennt werden sollen.

  3. auto: Wenn auf auto gesetzt, trennt der Browser Wörter automatisch nach Bedarf, um das Textlayout basierend auf Sprach- und typografischen Regeln zu optimieren.

Beispiel für die Syntax

.element {
  hyphens: auto;
}

Die Browserunterstützung für diese Eigenschaft variiert. Die meisten modernen Browser unterstützen sie, aber einige ältere Versionen möglicherweise nicht. Um die Kompatibilität mit verschiedenen Browsern zu überprüfen, können Sie Online-Ressourcen wie Can I Use (https://caniuse.com/#feat=css-hyphens) konsultieren.

Bei der Verwendung dieser Eigenschaft wird empfohlen, auch das lang-Attribut im HTML-Element anzugeben oder die CSS-Eigenschaft lang zu verwenden, um die Sprache Ihres Textinhalts anzuzeigen. Dies hilft, die korrekten Regeln für diese Sprache anzuwenden.

Beachten Sie, dass diese Eigenschaft nur für Block-Level-Elemente und Inline-Block-Elemente gilt. Sie funktioniert nicht bei Inline-Elementen, es sei denn, für diese wurde eine bestimmte Breite festgelegt.

Silbentrennung mit CSS

Silbentrennung einstellen

Um die automatische Silbentrennung für Text in einem Element zu aktivieren, können Sie die Eigenschaft hyphens mit dem Wert auto verwenden. Wenn auf auto gesetzt, fügt der Browser automatisch Bindestriche zu Wörtern hinzu, um sie bei Bedarf über Zeilen zu trennen und so das Textlayout und die Lesbarkeit zu verbessern.

Beispiel: Silbentrennung einstellen

p {
  hyphens: auto;
}

Silbentrennungszone festlegen

Mit der Eigenschaft hyphenate-limit-zone können Sie die Breite der Silbentrennungszone definieren. Das ist der Bereich am Rand des Containers, in dem Bindestriche erlaubt sind. Diese Eigenschaft akzeptiert einen Längenwert.

Beispiel: Silbentrennungszone festlegen

p {
  hyphens: auto;
  hyphenate-limit-zone: 50px;
}

Aufeinanderfolgende Bindestriche begrenzen

Um die Mindestanzahl von Zeichen vor und nach einem Bindestrich zu steuern, können Sie die Eigenschaft hyphenate-limit-chars verwenden. Sie nimmt drei Werte an: Mindestanzahl von Zeichen vor einem Bindestrich, Mindestanzahl von Zeichen nach einem Bindestrich und einen optionalen dritten Wert für die Mindestlänge eines Wortes, das für eine Trennung in Frage kommt.

Beispiel: Aufeinanderfolgende Bindestriche begrenzen

p {
  hyphens: auto;
  hyphenate-limit-chars: 4 3 8;
}

Silbentrennungsumbrüche steuern

Mit der Eigenschaft hyphenate-limit-lines können Sie begrenzen, wie viele aufeinanderfolgende Zeilen mit einem Trennpunkt enden dürfen. Dies hilft, zu viele gebrochene Zeilen hintereinander zu vermeiden.

Beispiel: Silbentrennungsumbrüche steuern

p {
  hyphens: auto;
  hyphenate-limit-lines: 2; 
}

In diesem Beispiel enden höchstens zwei aufeinanderfolgende Zeilen mit Trennungen. Wenn eine weitere Zeile eine benötigen würde, wird sie stattdessen verschoben.