overflow-wrap: anywhere

The new value 'anywhere' allows an otherwise unbreakable sequence of characters to be broken at an arbitrary point if there are no otherwise-acceptable break points in a line. Additionally, soft wrap opportunities introduced by 'anywhere' are considered when calculating min-content intrinsic sizes.

This feature address a long standing web compatibility issue related to the 'word-break: break-word' feature. The CSS Text 3 spec still allows the 'break-word' value to ensure compatibility (Safari and Chrome support it), but its marked as deprecated; that's why Firefox doesn't implement it. The 'word-break: break-word' feature provides a behavior that web authors really appreciate, which consist on breaking opportunities account for the min-content size. Several approaches have been explored, but all of them lead to serious web compatibility issues, so that the CSS WG resolved that a new CSS value should be the best solution.

Demos

• https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
• https://www.cjcid.com/articles/wrapping-long-words-css-html/

Documentation

• https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere

Specification

Editor's draft

Status in Chromium

Blink components: Blink>Layout

Enabled by default (tracking bug) in:

• Chrome for desktop release 80
• Chrome for Android release 80
• Android WebView release 80

Consensus & Standardization

• Firefox: Shipped
• Edge: No public signals
• Safari: No public signals
• Web Developers: Positive

Owner

• jfernandez@igalia.com

Last updated on 2020-06-15