Menu
I just noticed in Firefox (I assume it's the same in Chrome) a new property value called "anywhere" of a property "word-wrap". What does it do? I remember using normal (which is default) or break-word (for most uses) but what does "anywhere" mean? How is it different from "break-word"? Mozilla.org doesn't have it listed in their manual (yet?)
"anywhere" seems to do the same thing "break-word" does. I'm seeing this in Firefox 67.0
word-wrap: anywhere;
I don't really know what to make of it. Is it usefull? Has it always been there all this time and I just missed it?
494
Soft wrap opportunities introduced by anywhere are considered when calculating min-content intrinsic sizes. and later you can read: break-word. As for anywhere except that soft wrap opportunities introduced by break-word are not considered when calculating min-content intrinsic sizes.
The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an unusually long string of text causing layout problems due to overflow.
Definition and Usage The word-wrap property allows long words to be able to be broken and wrap onto the next line.
The word-wrap property in CSS is used to break long word and wrap into the next line. It defines whether to break words when the content exceeds the boundaries of its container.
Refer to the specification to find the definition:
anywhere
An otherwise unbreakable sequence of characters may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line. Shaping characters are still shaped as if the word were not broken, and grapheme clusters must stay together as one unit. No hyphenation character is inserted at the break point. Soft wrap opportunities introduced by anywhere are considered when calculating min-content intrinsic sizes.
and later you can read:
break-word
As for anywhere except that soft wrap opportunities introduced by break-word are not considered when calculating min-content intrinsic sizes.
Simply notice that the browser support is quite limited:
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#Browser_compatibility
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
