title: How to use automatic CSS hyphens with `word-break: break-all`?
body: <p>I'm using <code>word-break: break-all;</code> and want to know how I can have the browser automatically insert the <a href="https://developer.mozilla.org/en-US/docs/CSS/hyphens" rel="noreferrer">hyphens</a>, as demonstrated in an <a href="https://developer.mozilla.org/samples/cssref/hyphens.html" rel="noreferrer">MDN example</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    width: 80px;
    height: 80px;
    display: block;
    overflow: hidden;
    border: 1px solid red;
    word-break: break-all;
    hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Such that the text would look like this:</p>
  
  <pre><code>aaaaaaaa-
  aaaaaaaa-
  aaaaaaaa-
  aaaaaaaa
  </code></pre>
  
  <p>I created a <a href="https://jsfiddle.net/LJYj3/2/" rel="noreferrer">JSFiddle</a> too.</p>
  
  <p>This needs to work in IE9/IE10, but it'd be nice if it'd work in Firefox and Chrome as well.</p>