demo · v130
Recipe gallery — six places text-wrap shines
The new Chrome 130 syntax splits text-wrap into a shorthand plus longhands text-wrap-mode and text-wrap-style. Six real-world recipes — display headline, card title, table cell, button label, blockquote, hero subhead — each rendered against your live resizer at four syntactic choices: wrap, balance, pretty, and nowrap. The right tool per recipe is annotated.
500px
the code
/* Chrome 130: text-wrap is now a true shorthand. You can mix mode + style. */
h1 { text-wrap: balance; } /* good for headlines */
.card-title { text-wrap-style: pretty; } /* longhand: keep mode as default */
td { text-wrap-mode: nowrap; } /* longhand: explicit no-wrap */
/* Equivalent to the old terse syntax — but composes with @container,
inheritance, and animations correctly. */