¿Cómo usar guiones CSS automáticos con `word-break: break-all`?
Estoy usandoword-break: break-all;
y quiero saber cómo puedo hacer que el navegador inserte automáticamente elguiones, como se demuestra en unEjemplo de 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>
Tal que el texto se vería así:
aaaaaaaa-
aaaaaaaa-
aaaaaaaa-
aaaaaaaa
Creé unJSFiddle también.
Esto debe funcionar en IE9 / IE10, pero sería bueno si también funcionara en Firefox y Chrome.