CODEWITHSUNDEEP
css
ZYinMD
ZYinMD

Reputation: 5159

Difference between overflow-wrap: anywhere & overflow-wrap: break-word?

About the new css spec overflow-wrap:

MDN says break-word is the same as anywhere except

soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.

What does it mean?

Upvotes: 7

Views: 1893

Answers (1)

ZYinMD
ZYinMD

Reputation: 5159

Most of the time they're very similar.

One case when they're different: when you have a super long word (like an url) that is longer than the width of the container, and the container is a flex item with flex-grow, then anywhere will break the long word, whereas break-word will try to grow aggressively and avoid breaking the word when possible, which may squeeze other flex items out of proportion.

In this case, anywhere is more likely what you want. If that's true, you might as well do this:

overflow-wrap: break-word;
overflow-wrap: anywhere;

...because Safari supports of break-word is earlier than anywhere, so in old versions of Safari that does't support anywhere, the 2nd line will be ignored, which is not too bad.

Upvotes: 12

Related Questions