Add .break-word, improve word-break docs

[shawnbot]

The break-word class applies both word-break: break-word and overflow-wrap: break-word, to account for differences in the interpretation of word-break between Chrome and Firefox. See css-tricks for more info:

After describing examples of how word-break can be used in CJK content, the spec says: "To enable additional break opportunities only in the case of overflow, see overflow-wrap".

From this, we can surmise that word-break is best used with non-English content that requires specific word-breaking rules, and that might be interspersed with English content, while overflow-wrap should be used to avoid broken layouts due to long strings, regardless of the language used.

My understanding is that Chrome's interpretation is "looser", in the sense that it breaks words regardless of language; while Firefox's interpretation is more strict, essentially requiring overflow-wrap: break-word for English text.

• Add .wb-break-word declaration
• Add .break-word declaration
• Add overflow-wrap: break-word !important
• Update the docs

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://primer-css-git-wb-break-word.primer.now.sh

[emilybrick]

✨ 🙇‍♀

OBE

[shawnbot]

FYI @emilybrick I've confirmed that the word-break: break-word and overflow-wrap: break-word combo works uniformly on (from left to right) Chrome, Safari, and Firefox using this CodePen:

[shawnbot]

Okay @emilybrick, I think this is ready to review now. It's probably easiest to just look at the deployed docs and make sure that they make sense: