title: Cross-browser word breaks
body: <p>I've been trying to apply cross-browser (modern browsers) word breaks that works within a fluid layout. My attempt so far has been very close but Firefox has some issues dealing with it and it's hard to find a workaround that doesn't affect the other browsers. Based on <a href="http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/" rel="nofollow">http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/</a> I applied this,</p>
  
  <pre><code>  text-rendering: optimizelegibility;
    -ms-word-break:   break-all;
    word-break:       break-word;
    word-wrap:        break-word;
    -webkit-hyphens:  auto;
    -moz-hyphens:  auto;
    hyphens:  auto;
  </code></pre>
  
  <p>Yet this seems to cause (line based) breaks within words in Safari (v 7) as well as Firefox (v 27). Any ideas?</p>