title: Firefox word-break for inline elements
body: <p>I'm trying to change the <code>word-break</code> property for certain inline elements such as <code>&lt;span&gt;</code> and <code>&lt;a&gt;</code> to get a better flow of the page's content.</p>
  
  <p>It seems, that Firefox only recognises the word-break property for elements that are displayed as block (such as <code>&lt;div&gt;</code>), whereas Chrome honours the request to break the words.</p>
  
  <p>In the example below, the red and blue parts render identically in Chrome (the xxxxx is broken over several lines). In Firefox, the xxxxx in the red box overflows.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width:200px;background:red;"&gt;
    Hello &lt;span style="word-break:break-all;"&gt;xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&lt;/span&gt; World
  &lt;/div&gt;
  
  &lt;div style="width:200px;background:blue;word-break:break-all;"&gt;
    Hello &lt;span&gt;xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&lt;/span&gt; World
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Example from above: <a href="https://jsfiddle.net/7scx4hfq/" rel="nofollow">https://jsfiddle.net/7scx4hfq/</a></p>
  
  <p>Which browser is behaving correctly? Is it a Firefox bug or a Chrome bug?</p>
  
  <p>And more importantly, how can I achieve the desired effect in all browsers?</p>
  
  <p><strong>Note</strong>, setting <code>word-break:break-all</code> at a block level is not an option.</p>