text-wrap

Baseline 2024 *

Newly available

Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

Die text-wrap CSS-Kurzschreibweise steuert, wie Text innerhalb eines Elements umbrochen wird. Die verschiedenen Werte bieten:

Typografische Verbesserungen, zum Beispiel ausgewogenere Zeilenlängen bei gebrochenen Überschriften
Eine Möglichkeit, den Textumbruch vollständig auszuschalten.

Bestandteileigenschaften

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

Syntax

css

/* 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 Werteliste angegeben.

Werte

wrap: Text wird an geeigneten Zeichen (zum Beispiel Leerzeichen in Sprachen wie Englisch, die Leerzeichentrennung verwenden) über Zeilen umbrochen, um Überlauf zu minimieren. Dies ist der Standardwert.
nowrap: Text wird nicht über Zeilen umbrochen. Er läuft aus dem enthaltenen Element heraus, anstatt in einer neuen Zeile zu brechen.
balance: Text wird so umbrochen, dass die Anzahl der Zeichen auf jeder Zeile ausgeglichen ist, was die Layoutqualität und Lesbarkeit verbessert. Da das Zählen von Zeichen und deren Ausgleich über mehrere Zeilen rechentechnisch aufwendig 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 der Benutzeragent einen langsameren Algorithmus verwendet, der ein besseres Layout gegenüber der Geschwindigkeit bevorzugt. Dies ist für Fließtext vorgesehen, bei dem gute Typografie über die Leistung gestellt wird (zum Beispiel, wenn die Anzahl der Witwen minimiert werden soll).
stable: Führt zu demselben Verhalten wie wrap, außer dass beim Bearbeiten des Inhalts die Zeilen vor den bearbeiteten Zeilen statisch bleiben, anstatt dass der gesamte Textblock neu umbrochen wird.

Es gibt zwei Möglichkeiten, wie Text innerhalb eines Textblocks, wie eines Absatzes (<p>) oder von Überschriften (<h1>–<h6>), von Zeilen umgebrochen werden kann. Diese 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 anzuweisen, wie er die weichen Zeilenumbrüche kontrollieren soll.

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

Wenn der gestaltete Inhalt auf eine kurze Anzahl von Zeilen beschränkt ist, wie Überschriften, Bildunterschriften und Zitate, 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 von dieser Eigenschaft betroffenen Zeilen begrenzen, 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 sich negativ auf die Leistung auswirkt, 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, wenn er auf Inhalte angewendet wird, die contenteditable sind. Dieser Wert stellt sicher, dass beim Bearbeiten eines Textes die vorhergehenden Zeilen im bearbeiteten Bereich stabil bleiben.

Formale Definition

Anfangswert	`wrap`
Anwendbar auf	text and block containers
Vererbt	Ja
Prozentwerte	wie die jeweiligen Kurzschreibweisen: `text-wrap-mode`: Nein `text-wrap-style`: Nein
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `text-wrap-mode`: wie angegeben `text-wrap-style`: wie angegeben
Animationstyp	wie die jeweiligen Kurzschreibweisen: `text-wrap-mode`: diskret `text-wrap-style`: diskret

Formale Syntax

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

<text-wrap-mode> = 
  wrap    |
  nowrap  

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

Beispiele

Grundlegender Vergleich der Textumbruchwerte

HTML

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>

CSS

css

.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 und fügen Sie lange Wörter hinzu, um zu sehen, wie sich die unterschiedlichen Zeilen- und Wortlängen auf den Umbruch auswirken.

Spezifikationen

Specification
CSS Text Module Level 4 # text-wrap

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

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