css用连字符打破单词

Question

我想用第一行末尾的连字符打破长词.

预期:

BERUFSBILDUNGSZENT-
RUM

明白啦:

BERUFSBILDUNGSZENT
RUM

这是我的html和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;
}

你可以查看我的JSFiddle

Answer 1

2022年的解决方案：

如果您将lang属性添加到 div 并正常输入“Berufsbildungszentrum”，则 usinghyphens: auto;确实可以按预期工作。然后您可以使用 再次将单词大写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>

另请检查更新的JSFiddle

Answer 2

Chrome显然不会进行断字（至少在Windows上是）。使用其他浏览器或平台可能会更好。­如果您事先知道要在哪里中断，可以使用（软连字符）。否则，至少在Windows上的Chrome浏览器中，如果CSS断了一个长字，就无法获取连字符，除非它以输入开头。

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

另请参阅此答案。