title: Firefox word-break breaks short words at random points
body: <p>I'm <code>break-word</code>ing 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:</p>
  
  <p><img src="https://i.stack.imgur.com/MRuxH.png" alt="enter image description here"></p>
  
  <p>Here is the code I'm using to prevent break the words:</p>
  
  <pre><code>.break-word {
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  }
  </code></pre>
  
  <p>This is the the CSS I'm using for the container and the text:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>   &lt;div class="wrap break-word"&gt;
       &lt;div class="row-fluid quotation-marks"&gt;&amp;ldquo;&amp;rdquo;&lt;/div&gt;
       &lt;span class="quote-text"&gt;
         Having a partner definitely allows you to take more risks.
       &lt;/span&gt;
       &lt;span class="author"&gt;Arianna Huffington&lt;/span&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>Why is this happening? Any clues on how I could get the words to break normally across all browsers? Firefox is definitely a priority.  </p>
  
  <p>Thanks in advance!</p>