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>

另請參閱此答案。

Answer 2

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

Answer 3

將lang="de"屬性添加到您的 HTML 標記中，因為瀏覽器正在使用根據該語言標記決定的算法來決定這一點。