demo · v130

shorthand decomposition

The Chrome 130 syntax update splits the text-wrap property into a real shorthand with two longhands — text-wrap-mode and text-wrap-style — and aligns the values with the final spec. Pick any shorthand value below to see exactly which longhands it sets, and render a sample paragraph against the engine's resolved values.

shorthand input

p {
  text-wrap: wrap;
}

longhand decomposition (Chrome 130)

p {
  text-wrap-mode:  wrap;
  text-wrap-style: auto;
}

rendered preview

The quick brown fox jumps over the lazy dog. The five boxing wizards jump quickly. A lonely orphan word marks the worst line breaks.

shorthand × longhand grid

the spec change

/* Pre-spec (legacy unprefixed text-wrap):
   text-wrap: auto | nowrap | balance | pretty;
   — no shorthand semantics; values mixed mode and style. */

/* Spec / Chrome 130:
   text-wrap-mode:  wrap | nowrap;            // line-breaking behaviour
   text-wrap-style: auto | balance | pretty | stable;
                                              // optimisation strategy

   text-wrap is a shorthand:
     text-wrap: balance;        → mode auto-resolves to wrap; style: balance
     text-wrap: nowrap;         → mode: nowrap; style: auto
     text-wrap: wrap pretty;    → mode: wrap; style: pretty
*/

see also