css romper palabra con guión
Quiero romper la palabra larga con el guión al final de la primera línea.
Esperado:
BERUFSBILDUNGSZENT-
RUM
Tengo esto:
BERUFSBILDUNGSZENT
RUM
Aquí está mi html y css:
<div class="content">BERUFSBILDUNGSZENTRUM</div>
.content {
max-height: 80px;
width: 200px;
overflow-x: hidden;
word-wrap: break-word;
padding: 10px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
font-weight: bold;
font-size: 16px;
border: solid 1px #000;
}
Puedes consultar miJSFiddle