text-wrap CSS-Eigenschaft

Probieren Sie es aus

text-wrap: wrap;

text-wrap: nowrap;

text-wrap: balance;

text-wrap: pretty;

text-wrap: stable;

<section class="default-example" id="default-example">
  <div class="whole-content-wrapper">
    <p>Edit the text in the box:</p>
    <div class="transition-all" id="example-element">
      <p contenteditable>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem aut
        cum eum id quos est.
      </p>
    </div>
  </div>
</section>

.whole-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#example-element {
  border: 1px solid #c5c5c5;
  width: 250px;
}

Bestandteilseigenschaften

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

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

Syntax

/* 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 einzelnes Schlüsselwort aus der untenstehenden Liste von Werten angegeben.

Werte

wrap

Text wird an geeigneten Stellen (zum Beispiel Leerzeichen, in Sprachen wie Englisch, die Leerzeichentrennungen verwenden) umgebrochen, um Überläufe zu minimieren. Dies ist der Standardwert.

nowrap

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

balance

Text wird so umbrochen, dass eine bestmögliche Balance der Anzahl von Zeichen auf jeder Zeile erreicht wird, was die Layoutqualität und Lesbarkeit verbessert. Da das Zählen von Zeichen und deren Balance über mehrere Zeilen hinweg rechenintensiv 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 zu demselben Verhalten wie wrap, mit dem Unterschied, dass der User-Agent einen langsameren Algorithmus verwendet, der besseren Layouts gegenüber Geschwindigkeit den Vorzug gibt. Dies ist für Fließtext vorgesehen, bei dem gute Typografie gegenüber Performance bevorzugt wird (zum Beispiel, wenn die Anzahl der Waisenkinder minimiert werden soll).

stable

Führt zu demselben Verhalten wie wrap, außer dass beim Bearbeiten des Inhalts die Zeilen, die vor den bearbeiteten Zeilen liegen, statisch bleiben, anstatt dass der gesamte Textblock neu umbrochen wird.

Beschreibung

Es gibt zwei Möglichkeiten, wie Text in einem Inhaltsblock, wie einem Absatz (<p>) oder Überschriften (<h1>–<h6>) über Zeilenfließen kann: erzwungene Zeilenumbrüche, die vom Benutzer kontrolliert werden, und weiche Zeilenumbrüche, die vom Browser kontrolliert werden. Die text-wrap-Eigenschaft kann verwendet werden, um den Browser zu veranlassen, wie die weichen Zeilenumbrüche kontrolliert werden sollen.

Der ausgewählte Wert für text-wrap hängt davon ab, wie viele Textzeilen 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 geringe Anzahl von Zeilen beschränkt wird, wie Überschriften, Bildunterschriften und Blockzitate, kann text-wrap: balance hinzugefügt werden, um die Anzahl der Zeichen auf jeder Zeile auszugleichen, was die Layoutqualität und Lesbarkeit erhöht. 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 negative Auswirkungen auf die Leistung hat und daher nur für längere Textblöcke verwendet werden sollte, wenn das Layout wichtiger als die Geschwindigkeit ist.

Der stable-Wert verbessert die Benutzererfahrung bei Verwendung auf Inhalten, die contenteditable sind. Dieser Wert stellt sicher, dass, während der Benutzer Text bearbeitet, die vorherigen Zeilen im bearbeiteten Bereich stabil bleiben.

Formale Definition

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

Vergleich der grundlegenden Werte von text-wrap

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

.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 bearbeitbar. Ändern Sie den Text, fügen Sie lange Wörter hinzu, um zu sehen, wie die verschiedenen Zeilen- und Wortlängen das Umbruchverhalten beeinflussen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• white-space
• white-space-collapse
• CSS Text-Modul
• CSS text-wrap: balance auf developer.chrome.com (2023)
• CSS text-wrap: pretty auf developer.chrome.com (2023)
• Balancing Japanese and Korean typography von Kelly Choyce-Dwan (2025)