Wie verwende ich automatische CSS-Bindestriche mit `word-break: break-all`?

Ich benutzeword-break: break-all; und möchte wissen, wie ich den browser automatisch einfügen lassen kannBindestriche, wie in einem demonstriertMDN-Beispiel.

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>

So dass der Text so aussehen würde:

aaaaaaaa-
aaaaaaaa-
aaaaaaaa-
aaaaaaaa

Ich habe eineJSFiddle auch.

Dies muss in IE9 / IE10 funktionieren, aber es wäre schön, wenn es auch in Firefox und Chrome funktionieren würde.

Antworten auf die Frage(3)

Ihre Antwort auf die Frage