Bug 195345 - Implement "overflow-wrap: anywhere"
Summary: Implement "overflow-wrap: anywhere"
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Text (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks: 83934
  Show dependency treegraph
 
Reported: 2019-03-05 16:09 PST by Javier Fernandez
Modified: 2020-06-09 15:25 PDT (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Javier Fernandez 2019-03-05 16:09:12 PST
The CSS WG has resolved [1] add a deprecated note to prevent the usage of 'overflow-wrap: break-word' in favor of 'overflow-wrap: anywhere'.

The new value is described as follows:

https://www.w3.org/TR/css-text-3/#valdef-overflow-wrap-anywhere


[1] https://github.com/w3c/csswg-drafts/issues/2390
Comment 1 Javier Fernandez 2019-03-29 07:45:11 PDT
Firefox already shipped this feature
  - https://bugzilla.mozilla.org/show_bug.cgi?id=1505786

Chrome plans to implement this feature
  - https://bugs.chromium.org/p/chromium/issues/detail?id=905315
Comment 2 Javier Fernandez 2019-10-02 09:25:08 PDT
I have sent the "intent to implement" request for Blink. Showing some public support in this bug would help to get the request approved.
Comment 3 Myles C. Maxfield 2019-12-10 15:15:24 PST
Implementing this is a good idea. (You can consider this "public support.")

We already implement (the deprecated) word-break:break-word, which is defined[1] to "have the same effect as word-break: normal and overflow-wrap: anywhere." Therefore, implementing this should be fairly straightforward.

From looking at WebKit source code (RenderStyle::breakWords()), it appears that word-break:break-word is currently treated identically to overflow-wrap:break-word, which I think is incorrect according to the spec text quoted above. It would be cool if this project fixed this, too (though, of course, fixing this could be tracked in a separate bug).

[1] https://www.w3.org/TR/css-text-3/#word-break-property
Comment 4 Florian Rivoal 2020-01-20 04:08:23 PST
@Myles, The wrapping behavior of word-break:break-word / overflow-wrap: anywhere is the same as that of overflow-wrap:break-word, but the effect on intrinsic sizing is different. A quick bit of testing shows that safari has the expected sizing behavior difference between word-break:break-word and overflow-wrap:break-word.

To test, you can try this:

  <section style=width:0>
    <div style=float:left>longword</div>
  </section>

If you put overflow-wrap:break-word on the div, the longword will not wrap, but if you put word-break:break-word instead, it will.