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

Respuestas a la pregunta(2)

Su respuesta a la pregunta