1. Web
  2. CSS
  3. hyphens

hyphens

基線 2023 *
新推出

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

* 此特性的某些部分可能存在不同級別的支援。

hyphens CSS 屬性指定當文字跨多行換行時，單詞應如何進行連字元處理。它可以完全阻止連字元，在文字中手動指定位置進行連字元，或者讓瀏覽器在適當的位置自動插入連字元。

試一試

hyphens: none;

hyphens: manual;

hyphens: auto;

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

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

注意： 在上面的演示中，字串“An extraordinarily long English word!”包含隱藏的 &shy;（軟連字元）字元：An extra&shy;ordinarily long English word!。當指定 hyphens: manual; 時，此字元用於指示可能插入連字元的位置。

連字元規則是語言特定的。在 HTML 中，語言由 lang 屬性確定，只有當此屬性存在並且有適當的連字元詞典可用時，瀏覽器才會進行連字元處理。在 XML 中，必須使用 xml:lang 屬性。

注意： 定義連字元執行方式的規則並未由規範明確定義，因此確切的連字元方式可能因瀏覽器而異。

如果支援，hyphenate-character 可用於指定在斷行末尾使用的替代連字元。

語法

css
/* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;

/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: revert;
hyphens: revert-layer;
hyphens: unset;

hyphens 屬性指定為從以下列表中選擇的單個關鍵字值。

值

none

單詞不會在換行符處斷開，即使單詞內的字元建議換行點。行只會在空格處換行。

manual

預設值。單詞僅在單詞內字元建議換行機會的地方進行斷行。有關詳細資訊，請參閱下面的建議的換行機會。

auto

瀏覽器可以自由地在適當的連字元點自動斷開單詞，遵循它選擇的任何規則。但是，當存在建議的換行機會時（參見下面的建議的換行機會），它將覆蓋自動斷點選擇。

注意： auto 設定的行為取決於語言是否正確標記以選擇適當的連字元規則。您必須使用 lang HTML 屬性指定語言，以確保在該語言中應用自動連字元。

注意： 如果您應用 word-break: break-all，則不會顯示連字元，即使單詞在連字元點斷開。

建議的換行機會

有兩種 Unicode 字元用於手動指定文字中潛在的換行點

U+2010（連字元）

“硬”連字元表示一個可見的換行機會。即使該行實際上沒有在該點斷開，連字元仍然會渲染。

U+00AD (SHY)

一個不可見的“軟”連字元。此字元不會可見地渲染；相反，它標記了一個位置，如果需要連字元，瀏覽器應該在該位置斷開單詞。在 HTML 中，使用 &shy; 插入軟連字元。

注意： 當 HTML <wbr> 元素導致換行時，不會新增連字元。

正式定義

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

正式語法

hyphens = 
  none    |
  manual  |
  auto

示例

指定文字連字元

此示例使用三個類，每個類對應 hyphens 屬性的一種可能配置。

HTML

html
<dl>
  <dt><code>none</code>: no hyphen; overflow if needed</dt>
  <dd lang="en" class="none">An extreme&shy;ly long English word</dd>
  <dt>
    <code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)
  </dt>
  <dd lang="en" class="manual">An extreme&shy;ly long English word</dd>
  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
  <dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
</dl>

CSS

css
dd {
  width: 55px;
  border: 1px solid black;
}
dd.none {
  hyphens: none;
}
dd.manual {
  hyphens: manual;
}
dd.auto {
  hyphens: auto;
}

結果

規範

規範
CSS Text Module Level 3
# 連字元屬性

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後由 MDN 貢獻者 於 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.