text-wrap

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

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

Die text-wrap Eigenschaft wird als ein einzelnes Schlüsselwort aus der untenstehenden Liste von Werten festgelegt.

Werte

wrap

Text wird an geeigneten Zeichen (z. B. Leerzeichen in Sprachen wie Englisch, die Leerzeichen als Trenner verwenden) umgebrochen, um Überläufe zu minimieren. Dies ist der Standardwert.

nowrap

Text wird nicht über Zeilen hinweg umbrochen. Er wird über sein enthaltenes Element hinausfließen, anstatt auf eine neue Zeile zu brechen.

balance

Text wird so umgebrochen, dass die Anzahl der Zeichen in jeder Zeile am besten ausbalanciert wird, was die Layoutqualität und Lesbarkeit verbessert. Da das Zählen und Ausbalancieren von Zeichen ü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 zum gleichen Verhalten wie wrap, außer dass der User-Agent einen langsameren Algorithmus verwendet, der ein besseres Layout gegenüber der Geschwindigkeit bevorzugt. Dies ist für Fließtexte gedacht, bei denen gute Typografie der Leistung vorgezogen wird (z. B. wenn die Anzahl der Waisen auf ein Minimum reduziert werden soll).

stable

Führt zum gleichen Verhalten wie wrap, außer dass beim Bearbeiten des Inhalts durch den Benutzer die Zeilen, die vor den bearbeiteten Zeilen liegen, statisch bleiben, anstatt dass der ganze 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. 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 steuern, wie die weichen Zeilenumbrüche gehandhabt werden sollen.

Der Wert, den Sie für text-wrap wählen, hängt davon ab, wie viele Textzeilen Sie zu formatieren beabsichtigen, ob der Text contenteditable ist und ob Sie Aussehen oder Leistung priorisieren müssen.

Wenn der formatierte Inhalt auf eine geringe Anzahl von Zeilen beschränkt ist, wie z.B. Überschriften, Bildunterschriften und Zitate, kann text-wrap: balance hinzugefügt werden, um die Anzahl der Zeichen in 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 einen negativen Effekt auf die Leistung hat, daher sollte es nur für längere Textblöcke verwendet werden, wenn das Layout wichtiger ist als die Geschwindigkeit.

Der Wert stable verbessert die Benutzererfahrung beim Bearbeiten von Inhalten, die contenteditable sind. Dieser Wert stellt sicher, dass beim Bearbeiten von Text durch den Benutzer 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

Grundlegender Vergleich der Textumbruchwerte

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 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.

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)