demo · v130

text-wrap: shorthand + longhands

v130 splits text-wrap into text-wrap-mode and text-wrap-style, with text-wrap as the shorthand. Pick values, drag the preview's right edge to resize, and watch the wrap algorithm switch.

Why this headline doesn't end with a single orphan word any more

Drag the right-hand edge of this box to resize the container, and watch the title above re-wrap. With text-wrap-style: balance the browser balances line lengths; with pretty it specifically avoids orphans on the last line; with auto it uses the fast greedy algorithm.

the code

/* v130: shorthand + longhands */
h2 {
  text-wrap-mode: wrap;        /* longhand */
  text-wrap-style: balance;    /* longhand */
}

h2 {
  text-wrap: wrap balance;     /* shorthand */
}

/* Previous syntax (still parsed for compatibility): */
h2 { text-wrap: balance; }     /* implies wrap mode */

see also