css break word with hyphen

Question

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

Answer 1

Chrome does not do hyphenation apparently (at least on Windows). You may fare better with other browsers or platforms. You can use ­ (soft hyphen) if you know in advance where you want to break. Otherwise, at least in Chrome on Windows there's no way to get a hyphen when CSS breaks a long word, unless it was in the input to start with.

 .content { max-height: 80px; width: 200px; overflow-x: hidden; word-wrap: break-word; padding: 10px; font-weight: bold; font-size: 16px; border: solid 1px #000; }

 Using soft hyphen: <div class="content">BERUFSBILDUNGSZEN&shy;TRUM</div> Using automatic hyphenation (doesn't work in Chrome) <div class="content" lang="de" style="hyphens: auto; ">BERUFSBILDUNGSZENTRUM</div> Soft hyphen not displayed if it doesn't break there <div class="content" style="width: 400px; ">BERUFSBILDUNGSZEN&shy;TRUM</div>

See also this answer .

Answer 2

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

Answer 3

将lang="de"属性添加到您的 HTML 标记中，因为浏览器正在使用根据该语言标记决定的算法来决定这一点。