Update the syntax of `text-wrap` to match the new spec

concepts

1. text-wrap value picker

   Pick one of the canonical spec values (wrap, nowrap, balance, pretty, stable) and render a sample paragraph against each.

2. Shorthand decomposition

   The spec re-shape — text-wrap becomes a real shorthand. Pick a shorthand input; the demo shows the engine's text-wrap-mode and text-wrap-style longhand values plus a 2×4 grid mapping every longhand combination to its shorthand input.

3. Recipe gallery

   Six real-world recipes — display headline, card title, table cell, button label, blockquote, hero subhead — each rendered at four values: wrap, balance, pretty, nowrap. The right tool per recipe annotated.

4. balance vs pretty

   Resize the container and switch text types to feel the algorithmic difference: balance equalises line lengths for short headings; pretty prevents orphans in long paragraphs without reflow overhead.

5. Stable Editing

   text-wrap: stable is the editing-optimised value. Type in a contenteditable and watch adjacent lines stay put — compared to balance which reflows every line on each keystroke. Includes a value reference table mapping each shorthand to its text-wrap-mode and text-wrap-style longhands.

6. Context-Aware text-wrap

   Five UI elements (headline, card title, body, code label, button) with live text-wrap value pickers. Each shows the spec-aligned longhand decomposition (text-wrap-mode + text-wrap-style) and flags the recommended value for that context.

why it shipped

This feature improves the interoperability with other browsers, as both Gecko and WebKit are shipping the new syntax.

references

• ChromeStatus entry
• Spec