demo · v130

Context-Aware text-wrap

Different UI elements need different wrapping strategies. Chrome 130 ships text-wrap-mode and text-wrap-style as spec-aligned longhands, giving typographers precise per-element control. Use the advisor below to see which value fits each context — and why.

Container width

the code

/* Shorthand (Chrome 130 spec-aligned) */
h1 { text-wrap: balance; }
p  { text-wrap: pretty; }

/* Equivalent longhands */
h1 { text-wrap-mode: wrap; text-wrap-style: balance; }
p  { text-wrap-mode: wrap; text-wrap-style: pretty; }

see also