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 unten stehenden Liste von Werten angegeben.

wrap

Text wird an geeigneten Zeichen (zum Beispiel Leerzeichen in Sprachen wie Englisch, die Leerzeichen als Trennzeichen verwenden) umgebrochen, um Überlauf zu minimieren. Dies ist der Standardwert.

nowrap

Text wird nicht über Zeilen umgebrochen. Er wird das enthaltene Element überlaufen, anstatt auf eine neue Zeile zu brechen.

balance

Text wird so umgebrochen, dass die Anzahl der Zeichen auf jeder Zeile bestmöglich ausgeglichen wird, um die Layoutqualität und Lesbarkeit zu verbessern. Da das Zählen von Zeichen und das Ausgleichen über mehrere Zeilen rechnerisch anspruchsvoll ist, wird dieser Wert nur für Textblöcke unterstützt, die sich über eine begrenzte Anzahl von Zeilen erstrecken (sechs oder weniger für Chromium und zehn oder weniger für Firefox).

pretty

Führt zum gleichen Verhalten wie wrap, außer dass der Benutzeragent einen langsameren Algorithmus verwendet, der ein besseres Layout über die Geschwindigkeit bevorzugt. Dies ist für Fließtext vorgesehen, bei dem gute Typografie über der Leistung steht (zum Beispiel, wenn die Anzahl der Waise minimiert werden soll).

stable

Führt zum gleichen Verhalten wie wrap, außer dass, wenn der Benutzer den Inhalt bearbeitet, die Zeilen vor den bearbeiteten Zeilen statisch bleiben, anstatt dass der gesamte Textblock neu umgebrochen wird.

Es gibt 2 Wege, wie Text innerhalb eines Inhaltsblocks, wie einem Absatz (<p>) oder Überschriften (<h1>–<h6>), über Zeilen 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 den Browser zu veranlassen, wie die weichen Zeilenumbrüche zu steuern sind.

Der gewählte Wert für text-wrap hängt davon ab, wie viele Textzeilen Sie planen zu formatieren, ob der Text contenteditable ist und ob Sie das Erscheinungsbild oder die Leistung priorisieren müssen.

Wenn der gestaltete Inhalt auf eine kurze Anzahl von Zeilen beschränkt ist, wie Überschriften, Bildunterschriften und Blockzitate, kann text-wrap: balance hinzugefügt werden, um die Anzahl der Zeichen auf jeder Zeile auszugleichen und die Layoutqualität und Lesbarkeit zu verbessern. Da Browser die Anzahl der durch diese Eigenschaft beeinflussten Zeilen beschränken, ist der Einfluss dieses Wertes auf die Leistung vernachlässigbar.

Für längere Textabschnitte 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 Wert stable verbessert die Benutzererfahrung bei der Verwendung auf Inhalten, die contenteditable sind. Dieser Wert stellt sicher, dass, während der Benutzer Text bearbeitet, die vorhergehenden 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 die verschiedenen Zeilen- und Wortlängen den Umbruch beeinflussen.

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