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

回答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>

回答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.

来源：https://stackoverflow.com/questions/42685806/css-break-word-with-hyphen

标签

css

css-hyphens