Firefox word-break breaks short words at random points

Question

I\'m break-wording a container so that extremely long words won\'t overflow. While Chrome and Safari deal with this really well, it seems that Firefox and IE li

Answer 1

Remove word-break: break-all. Its meaning is that it creates the exact problem you are describing: the browsers is instructed to break words into pieces at will.

Using word-wrap: break-all is more sensible (or less nonsensical), because it tells a browser to break a word only when there is no other way to make a line fit into the available width. But it, too, violates the rules of English and most other languages: it is incorrect to break a word at an arbitrary point. So take it away, too.

Hyphenation makes much more sense, but it has limited browser support, and for apparent reasons it requires the language of text to be declared (because hyphenation rules are strongly language-dependent). You can use JavaScript-based hyphenation such as Hyphenator.js to deal with browsers that don’t support CSS hyphenation

Answer 2

I did a temporary fix by changing my break-word code to:

.break-word {
word-break: break-word;
word-wrap: break-word;
}

The words are no longer breaking weirdly. I'm just not sure how safe this is in terms of cross-browser support (as I've only tested with the latest versions of Chrome, Firefox, and Safari)

Apparently hyphenation is only supported with en-US explicitly declared. If anybody has a more valid answer/explanation, I will gladly accept your answer.

Answer 3

word-break:keep-all;

solved the problem for me

Answer 4

You're doubling up on CSS parameters. Try this..

.break-word {
-ms-word-break: break-all;
-ms-word-wrap: break-all;
-webkit-word-break: break-word;
-webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}