hyphens

Lange Wörter sprengen schnell schmale Spalten oder Blocksatz. hyphens steuert die automatische Silbentrennung mit Bindestrichen und verhindert extreme Lücken – eine Grundfertigkeit, die in fast jedem Layout hilfreich ist.

hyphens

hyphens steuert die automatische Silbentrennung mit Bindestrichen. Das verbessert Blocksatz und verhindert extreme Lücken.

  • noneKeine automatische Silbentrennung
  • manualNur an manuellen Trennstellen (­)
  • autoAutomatische Silbentrennung (benötigt lang-Attribut)

Beispiel:

hyphens: auto

Donaudampfschifffahrtsgesellschaftskapitän und Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz sind sehr lange deutsche Wörter. 

.text {
  hyphens: auto
}
<html lang="de">...</html>

Wichtig: Silbentrennung funktioniert nur, wenn die Sprache im HTML korrekt gesetzt ist, über das lang Attribut.

Zeilenbreite mit ch

1ch entspricht der Breite des Zeichens 0 in der aktuellen Schrift. Damit lässt sich die Breite von Textelementen direkt in Zeichen ausdrücken.

p {
    max-width: 60ch; /* maximal ~60 Zeichen pro Zeile */
}

Die Typografie-Faustregel für optimale Lesbarkeit liegt bei 45–75 Zeichen pro Zeile. Mit ch lässt sich das direkt umsetzen – und passt sich automatisch an die Schriftgrösse an.

  • Vorteil gegenüber px: Passt sich zur Schriftgrösse an – grössere Schrift, breitere Spalte
  • Vorteil gegenüber %: Unabhängig vom Container, immer ~gleich viele Zeichen

Kurz gesagt

  • hyphens aktiviert die automatische Worttrennung, funktioniert nur mit korrektem lang-Attribut.
  • ch orientiert sich an der Breite der Ziffer «0» und eignet sich für die Zeilenbreite.

Siehe auch: Text-Umbruch (text-wrap, white-space) | Text Overflow (text-overflow, word-break, overflow-wrap) | Text Wrap Composer