CSS Almanac → Properties → T → text-wrap-style

text-wrap-style

Juan Diego Rodríguez on May 20, 2025

Experimental: Check browser support before using this in production.

The text-wrap-style property lets us control how text lines should wrap. There are a couple of approaches for wrapping lines, usually either by inserting text on each new line or by balancing the text as new words are written. Using text-wrap-style, we can choose the most appropriate approach.

h1 {
  text-wrap-style: balance;
}

It can be used through the text-wrap shorthand, which includes text-wrap-mode and text-wrap-style.

The text-wrap-style property is defined in the CSS Text Module Level 4 specification.

Syntax

text-wrap-style: auto | balance | stable | pretty | avoid-orphans;

Initial: auto
Applies to: block containers with an inline formatting context
Inherited: yes
Percentages: n/a
Computed value: specified keyword
Canonical order: per grammar
Animation type: discrete

Values

text-wrap-style: auto;
text-wrap-style: balance;
text-wrap-style: stable;
text-wrap-style: pretty;

text-wrap-style: avoid-orphans; /* Not supported by any browser! */

auto: Lets the browser decide how to best wrap lines. Usually, words are directly laid out on each new line.
balance: Line breaks are balanced, such that each line takes roughly the same size.
stable: The same as auto, but it will stop lines before the input cursor from reflowing in editable text.
pretty: Hints the browser to favor text layout over speed. What’s this exactly means it’s browser dependent, but most browsers will avoid typographic orphans when using pretty.

Why is this a big deal?

When text-wrap: balance and text-wrap: pretty were first implemented in Chromium, 99% of the population was understandably unbothered, but web developers and designers knew it was a big step forward. Why? It all stems from text flow: how easily a reader can go through the text and understand its message without having to worry about the way it’s written. As said by Michelle M. Campbell at Purdue University:

Texts that violate our normal expectations of what a text should do or look like may be distracting, and may, therefore, be “choppy,” “unorganized,” “disjointed,” “confusing,” and tend to simply “not flow well.”

Many aspects of a text can prevent it from “flowing well”, but at a paragraph level, we need to maintain a visually pleasing structure. Among all the things we can do to achieve that is line wrapping, so lines don’t become illegibly large. This seems easy for a human, but a computer needs an algorithm for the task. The easiest line-wrapping algorithm is to skip to the next line once words can’t fit in the current line, but this won’t yield the best results; titles, for example, may span across the whole page only to wrap a single word onto the next line:

This isn’t a problem in printed media, in which we know beforehand the page size, font size, line height, word count, and many more variables that are simply unknown on the web. So developers had to either ignore them or get those variables through JavaScript and change the text layout accordingly. Luckily, we now have the text-wrap-style property to control how lines should wrap so they do not disturb text flow.

Basic usage

By default, browsers will try to fill text line by line, and while fast, it may not yield the best results for every type of text. In the case of titles and captions, we can use the text-wrap: balance value so that each line is roughly the same length:

h1 {
  text-wrap-style: balance;
}

Another common thing to avoid is short single words at the end of a line, called “typographic orphans”. Designers discourage these, especially in body text. We can use text-wrap: pretty to minimize orphans as much as possible:

p {
  text-wrap-style: pretty;
}

`text-wrap: pretty` does more than you think

While Chromium was the first browser to ship text-wrap: pretty, at the time of writing, is also the browser with the tamest implementation, since it only works to avoid typographic orphans. On the other hand, Safari Technology Preview 216 shipped an experimental version of text-wrap: pretty aiming to actually make text look prettier when applied. To be more specific, it prevents short lines, improves the rag, and reduces the need for hyphenation — across all of the text, no matter how long it is. We are not yet making adjustments to prevent rivers, although we’d love to in the future.

In case you were wondering what each of them exactly means:

Prevents short lines. Avoids singles words at the end of the paragraph.
Improves rag. Keeps each line relatively the same length.
Reduces hyphenation. When enabled, hyphenation improves rag but also breaks word apart. In general, hyphenation should be kept at a minimum.

In the future, Safari also aims to reduce typographic rivers, which refer to the whitespace between words that seem connected through lines in a paragraph.

Limitations

Instead of the line-by-line algorithm, both balance and pretty use a paragraph-level algorithm, which checks other lines to better lay the next one. For example, Chromium uses a Score-based Paragraph-level algorithm, which computes all possible ways to break lines, assigns them a score, and uses the one with the best score.

In the case of balance it checks all the ways to break text. Of course, this is computationally expensive, so browsers will cap the maximum number of lines (six lines in Chromium and ten in Firefox) among other optimizations. Meanwhile, Safari doesn’t appear to have a limit, and according to them, it isn’t necessary:

The WebKit implementation doesn’t need to limit the number of lines. Every line will be balanced with all of the others.

If you were wondering, Chromium’s the score-based algorithm used by balance is O(n! + n) where n is the number of break opportunities. As the number of break opportunities increases, so will the algorithm duration.

In Chromium browsers, the current pretty focuses only on orphans, so it only has to check the last line and will only do so if the last line is shorter than one-third of the available width. While Safari takes into consideration all lines, apparently without performance issues:

In WebKit-based browsers or apps, your text element would need to be many hundreds or thousands of lines long to see a performance hit.

Right now, in Chromium, balance is apparently meant to be used only for titles and captions, while pretty can be used in the body text.

h1, h2, h3, h4, h5, h6 {
  text-wrap-style: balance;
}

p {
  text-wrap-style: pretty;
}

As said by Koji Ishii, the engineer behind text-wrap in Chromium:

[…] balance and pretty are exclusive. They are for different purposes (headlines vs body.) – Koji Ishii

However, Safari offers a differing opinion, as stated by Jen Simmons:

There are people who will give you an overly simple answer like “pretty is for paragraphs and balance is for headlines” — but that’s likely bad advice.

Titles, caption, teasers and other kinds of short texts may benefit from balance, while in some situations titles shouldn’t be too short and may look better using pretty. It all depends on exactly the context. What we can agree on is that balance should be used in body text, as long block of texts may be too narrow to read.