CODEWITHSUNDEEP
csssafariword-wrap
user663031
user663031

Reputation:

Undocumented word-break: break-word CSS property?

We want to avoid long words overflowing the line and let them be broken if they have to, for which the standard approach is

word-wrap: break-word

Or its equivalent

overflow-wrap: break-word

However, we found this not to work on Safari (including Mac and iOS).

We then discovered by accident that the word-break CSS property, which is supposed to only accept a value of break-all, meaning to break anywhere at all, apparently takes an undocumented value of break-word (Chrome accepts this as well), and that the following

word-wrap:  break-word;
word-break: break-word;

appears to solve the problem on Safari.

I was unable to find any references on the web either to the non-standard break-word value for word-break, or to any Safari "bugs" with word-wrap: break-word that using word-break: break-word would solve.

Upvotes: 3

Views: 4731

Answers (2)

Ben Wheeler
Ben Wheeler

Reputation: 7344

word-break: break-word is officially deprecated.

From the CSS Text Module Level 3 Working Draft:

For compatibility with legacy content, the word-break property also supports a deprecated break-word keyword. When specified, this has the same effect as word-break: normal and overflow-wrap: anywhere, regardless of the actual value of the overflow-wrap property.

If you like what word-break: break-word seems to do (which I do!), you should use word-break: normal and overflow-wrap: anywhere instead (and then you can try changing each of them further if you like)

Upvotes: 3

Stickers
Stickers

Reputation: 78676

As far as I know word-break: break-word; is non-standard, webkit only. It can be found on Safari CSS Reference

word-break Specifies the level of strictness when breaking lines of text in ideographic languages such as Chinese, Japanese, and Korean.

Syntax word-break: strictness Parameters strictness The level of strictness. Constants break-all, break-word, normal Availability Available in Safari 3.0 and later. Available in iOS 2.0 and later. Support Level Stable CSS 3.

Upvotes: 3

Related Questions