hyphenate-character

Baseline 2023

新推出

自 2023 年 9 月起，此功能可在最新的裝置和瀏覽器版本上使用。此功能可能無法在較舊的裝置或瀏覽器上使用。

hyphenate-character CSS 屬性設定在連字元斷字之前，行末使用的字元（或字串）。

自動連字元和軟連字元都根據指定的 hyphenate-character 值顯示。

試一試

hyphenate-character: auto;

hyphenate-character: "=";

hyphenate-character: "—";

<section id="default-example">
  <p id="example-element">An extraordinarily long English word!</p>
</section>

#example-element {
  border: 2px dashed #999999;
  font-size: 1.5rem;
  text-align: left;
  width: 7rem;
  hyphens: auto;
}

語法

css

hyphenate-character: <string>;
hyphenate-character: auto;

該值要麼設定用於代替連字元的字串，要麼指示使用者代理根據當前的排版約定選擇一個合適的字串（預設）。

值

<string>: 在連字元斷字之前，行末使用的 <string>。如果使用的字元過多，使用者代理可能會截斷此值。
auto: 使用者代理根據內容語言的排版約定選擇合適的字串。這是預設屬性值，只有在需要覆蓋不同的繼承值時才需要顯式設定。

正式定義

初始值	`auto`
應用於	所有元素
繼承性	是
計算值	同指定值
動畫型別	離散

正式語法

hyphenate-character = 
  auto      |
  <string>

示例

此示例顯示了兩個相同的文字塊，它們的 hyphens 屬性設定為確保它們在需要的地方斷字，並在軟連字元斷字處斷字（使用  建立）。第一個文字塊的連字元值更改為等號 (=)。第二個文字塊未設定 hyphenate-character，這對於支援此屬性的使用者代理來說等同於 hyphenate-character: auto。

HTML

html

<dl>
  <dt><code>hyphenate-character: "="</code></dt>
  <dd id="string" lang="en">Superc&shy;alifragilisticexpialidocious</dd>
  <dt><code>hyphenate-character is not set</code></dt>
  <dd lang="en">Superc&shy;alifragilisticexpialidocious</dd>
</dl>

CSS

css

dd {
  width: 90px;
  border: 1px solid black;
  hyphens: auto;
}

dd#string {
  -webkit-hyphenate-character: "=";
  hyphenate-character: "=";
}

結果

規範

規範
CSS 文字模組第 4 級 # propdef-hyphenate-character

瀏覽器相容性

另見

相關 CSS 屬性：hyphens、overflow-wrap。

幫助改進 MDN

瞭解如何貢獻

此頁面由MDN 貢獻者上次修改於2025 年 8 月 13 日。

在 GitHub 上檢視此頁面 • 報告此內容存在的問題