FireFox not respecting .eui-textBreakAll in all cases

[legrego]

This came out of researching elastic/kibana#44871 / elastic/kibana#44849:

I added eui-textBreakAll to a <p> tag in order to prevent a long URL from overflowing its container. This works great in Chrome, and even FF for most text strings.

However, Firefox refuses to break a long sequence of - characters, even with eui-textBreakAll set.

I discovered that adding overflow-wrap: break-word; to the eui-textBreakAll definition "fixes" this, but I'm not sure if it is the proper solution or not.

Reproducer: https://codesandbox.io/s/non-ascii-characters-ycp6h

[cchaos]

Honestly, what you probably want is .eui-textBreakWord. This better handles not breaking a word if not necessary and it uses your solution of overflow-wrap: break-word so it works in Firefox.

[legrego]

Honestly, what you probably want is .eui-textBreakWord. This better handles not breaking a word if not necessary and it uses your solution of overflow-wrap: break-word so it works in Firefox.

Good call, that does the trick for me! Do you know if there's a reason why eui-textBreakAll doesn't include overflow-wrap?

[cchaos]

Because we didn't test for this case of weird characters.... It works fine in FF in our docs

[legrego]

Ok cool - I was just trying to figure out if this was a bug we should keep open, or if I was just misusing the classes. Turns out it's both!