я используюword-break: break-all; и хочу знать, как я могу сделать так, чтобы браузер автоматически вставлялдефисакак показано вПример MDN.

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>

Так, что текст будет выглядеть так:

aaaaaaaa-
aaaaaaaa-
aaaaaaaa-
aaaaaaaa

Я создалJSFiddle слишком.

Это должно работать в IE9 / IE10, но было бы неплохо, если бы оно работало и в Firefox и Chrome.