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

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>

另见 this answer。

Answer 2

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

Answer 3

2022年解决方案：

如果您将 lang 属性添加到您的 div 并正常输入“Berufsbildungszentrum”，使用 hyphens: 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

css 用连字符分隔单词

css break word with hyphen

css

css-hyphens