How to use automatic CSS hyphens with `word-break: break-all`?

I'm using word-break: break-all; and want to know how I can have the browser automatically insert the hyphens, as demonstrated in an MDN example.

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;
}

<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

Such that the text would look like this:

aaaaaaaa-
aaaaaaaa-
aaaaaaaa-
aaaaaaaa

I created a JSFiddle too.

This needs to work in IE9/IE10, but it'd be nice if it'd work in Firefox and Chrome as well.

Solution

The -ms-hyphens property only works in IE10+. It's not possible in IE9 or below.

See the browser compatibility chart at the bottom of the reference link you provided.

It doesn't work in Chrome yet: WebKit Hyphenation