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;
}

Zusätzliche Eigenschaften

Diese Eigenschaft ist eine Kurzform 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;

Werte

Diese Eigenschaft wird als eines der folgenden Schlüsselwörter angegeben:

wrap

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

nowrap

Text wird nicht über Zeilen hinweg umbrochen. Er wird über sein enthaltendes Element hinauslaufen, anstatt in eine neue Zeile gebrochen zu werden.

balance

Text wird so umbrochen, dass die Anzahl der Zeichen in jeder Zeile am besten ausbalanciert wird, wodurch die Layoutqualität und Lesbarkeit verbessert wird. Da das Zählen von Zeichen und das Ausbalancieren dieser über mehrere Zeilen hinweg rechnerisch aufwendig ist, wird dieser Wert nur für Textblöcke mit einer begrenzten Anzahl von Zeilen unterstützt (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 gedacht, bei dem gute Typografie wichtiger ist als die Leistung (zum Beispiel, wenn die Anzahl von Waisenkindern auf ein Minimum beschränkt werden sollte).

stable

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

Beschreibung

Es gibt zwei Möglichkeiten, wie Text innerhalb eines Inhaltsblocks, wie einem Absatz (<p>) oder Überschriften (<h1>–<h6>) über Zeilen hinweg fließen kann. Diese sind 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 dem Browser mitzuteilen, wie er die weichen Zeilenumbrüche steuern soll.

Der Wert, den Sie für text-wrap wählen, hängt davon ab, wie viele Textzeilen Sie erwarten zu formatieren, 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 wird, wie Überschriften, Bildunterschriften und Blockzitate, kann text-wrap: balance hinzugefügt werden, um die Anzahl der Zeichen in jeder Zeile auszugleichen, was die Layoutqualität und Lesbarkeit verbessert. Da Browser die Anzahl der Zeilen, die von dieser Eigenschaft betroffen sind, 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, sodass es nur für längere Textblöcke verwendet werden sollte, wenn das Layout wichtiger ist als die Geschwindigkeit.

Der Wert stable verbessert die Benutzererfahrung, wenn er auf Inhalte angewendet wird, die contenteditable sind. Dieser Wert stellt sicher, dass, während der Benutzer Text bearbeitet, die vorherigen Zeilen im Bereich, der bearbeitet wird, 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

Grundlegender Vergleich der Textumbruchswerte

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, indem Sie lange Wörter hinzufügen, um zu sehen, wie die unterschiedlichen Zeilen- und Wortlängen den Umbruch beeinflussen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• white-space
• white-space-collapse
• CSS-Textmodul
• 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)