'css break word with hyphen

I want to break the long word with the hyphen at the end of the first line.

Expected:

BERUFSBILDUNGSZENT-
RUM

Got this:

BERUFSBILDUNGSZENT
RUM

Here's my html and 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;
}

You can check my JSFiddle

csscss-hyphens


Solution 1:[1]

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;.

.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

Solution 2:[2]

Add the lang="de" Attribute to your HTML-Tag, as the browser is deciding this using an algorithm which is decided on that language Tag.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Hakan Fıstık

Related Questions