css break word with hyphen

Solution in 2022:

If you add the lang Attribute to your div and type out “Berufsbildungszentrum” cased normally, using hyphens: auto; does work as excpected. You can then uppercase the word again using text-transform: uppercase;.

Please note that the supported dictionaries for hyphenation differ from browser to browser. A compatibility table can be seen here.

.content {
  max-height: 80px;
  width: 200px;
  overflow-x: hidden;
  padding: 10px;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  border: solid 1px #000;
}

<div lang="de" class="content">Berufsbildungszentrum</div>

Check also the updated JSFiddle