Browser Fallback Strategy for text-wrap: pretty

Current Support Snapshot (early 2026)

Property	Chrome	Edge	Safari	Firefox
text-wrap: nowrap	✅ all	✅ all	✅ all	✅ all
text-wrap: wrap	✅ all	✅ all	✅ all	✅ all
text-wrap: balance	✅ 114+	✅ 114+	✅ 17.5+	✅ 121+
text-wrap: pretty	✅ 117+	✅ 117+	✅ 17.5+	❌ not yet
text-wrap: stable	✅ 121+	✅ 121+	✅ 17.5+	❌ not yet

Firefox accounts for roughly 3% of global browser share but is overrepresented in technical, accessibility-conscious, and developer audiences — so don't ignore it.

Strategy 1: Trust the cascade (recommended)

text-wrap: pretty is progressive enhancement: an unsupported browser silently falls back to default greedy wrapping. As long as your design works with default wrapping, just write the rule and let the cascade handle it:

article p {
  text-wrap: pretty;
}

No JavaScript, no @supports, no maintenance.

Strategy 2: @supports for divergent fallbacks

If you want to apply different styles to non-supporting browsers, use @supports:

article p {
  /* baseline for all browsers */
  hyphens: auto;
  line-height: 1.6;
}

@supports (text-wrap: pretty) {
  article p {
    text-wrap: pretty;
  }
}

@supports not (text-wrap: pretty) {
  article p {
    /* fallback: tighter line-height to compensate visually */
    line-height: 1.55;
  }
}

Strategy 3: JavaScript feature detection

For runtime decisions (rare):

const supportsPretty = CSS.supports('text-wrap', 'pretty');
const supportsBalance = CSS.supports('text-wrap', 'balance');

document.documentElement.classList.toggle('no-text-wrap-pretty', !supportsPretty);
document.documentElement.classList.toggle('no-text-wrap-balance', !supportsBalance);

Then style with .no-text-wrap-pretty article p { ... } if you really need a JS-driven branch (almost never required for text wrapping).

Old browsers and legacy techniques

For users on truly old browsers (IE11, pre-2020 Safari), text-wrap is ignored entirely. The text wraps using the default greedy algorithm — which is what those users have always seen. You don't need to ship the old Adam-Mordecai-Balance-Text JavaScript library unless you need pixel-perfect parity in those environments (you almost certainly don't).