Firefox word-break breaks short words at random points

Problem

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 like to break words randomly - even short words, at the most ridiculous points. See the screenshots below:

enter image description here

Here is the code I'm using to prevent break the words:

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

This is the the CSS I'm using for the container and the text:

.wrap {
position: relative;
text-align: center;
margin: 40px auto 20px;
padding: 50px;
border: 4px double #f7f7f7;
display: block;
}
.quote-text {
font-size: 40px;
line-height: 50px;
font-weight: 400;
}

HTML

   <div class="wrap break-word">
     <div class="row-fluid quotation-marks">&ldquo;&rdquo;</div>
     <span class="quote-text">
       Having a partner definitely allows you to take more risks.
     </span>
     <span class="author">Arianna Huffington</span>
   </div>

Why is this happening? Any clues on how I could get the words to break normally across all browsers? Firefox is definitely a priority.

Thanks in advance!

Problem courtesy of: Michelle

Solution

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;
}
Solution courtesy of: Harry

Discussion

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.

Discussion courtesy of: Michelle
word-break:keep-all;

solved the problem for me

Discussion courtesy of: rjtkoh

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

Discussion courtesy of: Jukka K. Korpela

This recipe can be found in it's original form on Stack Over Flow.