text-wrap-style

Probieren Sie es aus

text-wrap-style: auto;

text-wrap-style: balance;

text-wrap-style: pretty;

text-wrap-style: 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;
}

Syntax

/* Keyword values */
text-wrap-style: auto;
text-wrap-style: balance;
text-wrap-style: pretty;
text-wrap-style: stable;

/* Global values */
text-wrap-style: inherit;
text-wrap-style: initial;
text-wrap-style: revert;
text-wrap-style: revert-layer;
text-wrap-style: unset;

Wenn ein Umbruch erlaubt ist (siehe text-wrap-mode), wird die Eigenschaft text-wrap-style als ein einzelnes Schlüsselwort aus der unten stehenden Werteliste angegeben.

Werte

auto

Text wird auf die performanteste Weise für den Browser umbrochen und berücksichtigt nicht die Anzahl der Zeichen.

balance

Text wird so umbrochen, dass die Anzahl der Zeichen pro Zeile am besten ausbalanciert wird, wodurch die Layoutqualität und Lesbarkeit verbessert werden. Da das Zählen der Zeichen und das Ausbalancieren über mehrere Zeilen hinweg rechenintensiv 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

Text wird mit einem langsameren Algorithmus umbrochen, der ein besseres Layout gegenüber der Geschwindigkeit bevorzugt. Dies ist für Fließtext gedacht, wo gute Typografie über Leistung gestellt wird (zum Beispiel, wenn die Anzahl der Orphans auf ein Minimum reduziert werden soll).

stable

Text wird so umbrochen, dass beim Bearbeiten des Inhalts durch den Benutzer die Zeilen, die vor den bearbeiteten Zeilen stehen, statisch bleiben, anstatt dass der gesamte Textblock neu umbricht.

Beschreibung

Wenn der Inhalt umbrochen werden darf, was standardmäßig der Fall ist, gibt es eine Reihe von Optionen, die die Art und Weise beeinflussen können, wie der Inhalt umbrochen wird.

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

Wenn der gestylte Inhalt auf eine geringe Anzahl von Zeilen beschränkt ist, wie z.B. Überschriften, Bildunterschriften und Blockzitate, kann text-wrap-style: balance hinzugefügt werden, um die Anzahl der Zeichen pro Zeile auszugleichen und so die Layoutqualität und Lesbarkeit zu verbessern. Da Browser die Anzahl der von dieser Eigenschaft betroffenen Zeilen einschränken, ist der Einfluss dieses Wertes auf die Leistung vernachlässigbar.

Für längere Textabschnitte kann text-wrap-style: pretty verwendet werden. Beachten Sie, dass pretty einen negativen Einfluss auf die Leistung hat und daher 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 für Inhalte verwendet wird, die contenteditable sind. Dieser Wert sorgt dafür, dass die vorherigen Zeilen im bearbeiteten Bereich stabil bleiben, während der Benutzer den Text bearbeitet.

Formale Definition

Formale Syntax

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

Beispiele

Ausbalancierter Text

Dieses Beispiel enthält zwei Absätze, der erste hat die Standardeinstellung auto und der zweite ist balance.

HTML

<h2>Unbalanced</h2>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, ad. Impedit
  adipisci rerum modi praesentium atque aperiam vitae nesciunt consectetur
  assumenda deleniti repudiandae perferendis sed odio doloremque, aliquid natus
  laboriosam?
</p>
<h2>Balanced</h2>
<p class="balanced">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, ad. Impedit
  adipisci rerum modi praesentium atque aperiam vitae nesciunt consectetur
  assumenda deleniti repudiandae perferendis sed odio doloremque, aliquid natus
  laboriosam?
</p>

CSS

p {
  max-width: 60ch;
}
.balanced {
  text-wrap-style: balance;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• text-wrap
• text-wrap-mode