text-wrap

Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:

• text-wrap-mode
• text-wrap-style

/* Keyword values */
text-wrap: wrap;
text-wrap: nowrap;
text-wrap: balance;
text-wrap: pretty;
text-wrap: stable;

/* Global values */
text-wrap: inherit;
text-wrap: initial;
text-wrap: revert;
text-wrap: revert-layer;
text-wrap: unset;

Die text-wrap-Eigenschaft wird als ein einzelnes Schlüsselwort aus der Liste der unten stehenden Werte angegeben.

wrap

Text wird an geeigneten Zeichen (z.B. Leerzeichen in Sprachen wie Englisch, die Leerzeichenseparatoren verwenden) umbrochen, um Überlauf zu minimieren. Dies ist der Standardwert.

nowrap

Text wird nicht umbrochen. Er wird sein enthaltendes Element überlaufen, anstatt in einer neuen Zeile fortzufahren.

balance

Text wird so umbrochen, dass die Anzahl der Zeichen auf jeder Zeile möglichst ausgewogen ist, um die Layoutqualität und Lesbarkeit zu verbessern. Da das Zählen der Zeichen und das Ausbalancieren über mehrere Zeilen rechnerisch aufwändig ist, wird dieser Wert nur für Textblöcke unterstützt, die eine begrenzte Anzahl von Zeilen umfassen (sechs oder weniger für Chromium und zehn oder weniger für Firefox).

pretty

Führt zu demselben Verhalten wie wrap, außer dass das Benutzeragent ein langsameres Algorithmus verwendet, das besseren Layout über Geschwindigkeit bevorzugt. Dies ist für Fließtext gedacht, wo gute Typografie über Leistung steht (z.B. wenn die Anzahl der orphans minimiert werden soll).

stable

Führt zu demselben Verhalten wie wrap, außer dass beim Bearbeiten des Inhalts die Zeilen, die vor den editierten Zeilen kommen, statisch bleiben, anstatt den gesamten Textblock neu umzubrechen.

Es gibt 2 Möglichkeiten, wie Text innerhalb eines Inhaltsblocks, wie eines Absatzes (<p>) oder Überschriften (<h1>–<h6>) über Zeilen hinweg fließen kann. Dies sind erzwungene Zeilenumbrüche, die vom Benutzer gesteuert werden, und weiche Zeilenumbrüche, die vom Browser gesteuert werden. Die text-wrap-Eigenschaft kann verwendet werden, um dem Browser zu signalisieren, wie die weichen Zeilenumbrüche gesteuert werden sollen.

Der von Ihnen gewählte Wert für text-wrap hängt davon ab, wie viele Zeilen Text Sie stylen möchten, ob der Text contenteditable ist und ob Sie Aussehen oder Leistung priorisieren müssen.

Wenn der formatierte Inhalt auf eine kleine Anzahl von Zeilen beschränkt ist, wie z.B. Überschriften, Bildunterschriften und Blockzitate, kann text-wrap: balance hinzugefügt werden, um die Anzahl der Zeichen in jeder Zeile auszubalancieren und so die Layoutqualität und Lesbarkeit zu verbessern. Da Browser die Anzahl der von dieser Eigenschaft betroffenen Zeilen begrenzen, ist der Einfluss dieses Wertes auf die Leistung vernachlässigbar.

Für längere Abschnitte von Text kann text-wrap: pretty verwendet werden. Beachten Sie, dass pretty negative Auswirkungen auf die Leistung hat, daher sollte es nur für längere Textblöcke verwendet werden, wenn das Layout wichtiger als die Geschwindigkeit ist.

Der stable Wert verbessert die Benutzererfahrung, wenn er auf Inhalte angewendet wird, die contenteditable sind. Dieser Wert stellt sicher, dass bei der Bearbeitung von Text die vorherigen Zeilen im bearbeiteten Bereich stabil bleiben.

text-wrap = 
  <'text-wrap-mode'>   ||
  <'text-wrap-style'>  

<text-wrap-mode> = 
  wrap    |
  nowrap  

<text-wrap-style> = 
  auto           |
  balance        |
  stable         |
  pretty         |
  avoid-orphans  

HTML

<h2 class="wrap" contenteditable="true">
  The default behavior; the text in the heading wraps "normally"
</h2>

<h2 class="nowrap" contenteditable="true">
  In this case the text in the heading doesn't wrap, and overflows the container
</h2>

<h2 class="balance" contenteditable="true">
  In this case the text in the heading is nicely balanced across lines
</h2>

.wrap {
  text-wrap: wrap;
}

.nowrap {
  text-wrap: nowrap;
}

.balance {
  text-wrap: balance;
}

h2 {
  font-size: 2rem;
  font-family: sans-serif;
}

Ergebnis

Der Text im Beispiel ist editierbar. Ändern Sie den Text, indem Sie lange Wörter hinzufügen, um zu sehen, wie sich die unterschiedlichen Zeilen- und Wortlängen auf den Umbruch auswirken.

• white-space
• white-space-collapse
• CSS Textmodul
• CSS text-wrap: balance auf developer.chrome.com
• CSS text-wrap: pretty auf developer.chrome.com