CSS-Text-Wrap: balance

Eine klassische Typografietechnik, bei der Zeilenumbrüche für ausgewogene Textblöcke manuell erstellt werden, wird in CSS übernommen.

Der balance-Wert für text-wrap ist Teil von CSS Text Level 4. In den Beispielen in diesem Beitrag sehen Sie, wie Sie mit nur einer Zeile CSS Ihre Textlayouts erheblich verbessern können.

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

Source

Demo testen

Ohne text-wrap: balance haben Designer, Content-Bearbeiter und Publisher nur wenige Tools, um die Balance von Linien zu ändern. Die besten Optionen sind <wbr> oder &shy;, um fundiertere Entscheidungen darüber zu treffen, wo Zeilen und Wörter getrennt werden sollen.

Als Entwickler kennen Sie die endgültige Größe, Schriftgröße oder sogar die Sprache einer Überschrift oder eines Absatzes nicht. Alle Variablen, die für eine effektive und ästhetische Textumbruch-Behandlung erforderlich sind, befinden sich im Browser. Daher sehen wir in der folgenden Abbildung einen Umbruch der Überschrift: