hyphenate-limit-chars

語法

/* Numeric values */
hyphenate-limit-chars: 10 4 4;
hyphenate-limit-chars: 10 4;
hyphenate-limit-chars: 10;

/* Keyword values */
hyphenate-limit-chars: auto auto auto;
hyphenate-limit-chars: auto auto;
hyphenate-limit-chars: auto;

/* Mix of numeric and keyword values */
hyphenate-limit-chars: 10 auto 4;
hyphenate-limit-chars: 10 auto;
hyphenate-limit-chars: auto 3;

/* Global values */
hyphenate-limit-chars: inherit;
hyphenate-limit-chars: initial;
hyphenate-limit-chars: revert;
hyphenate-limit-chars: revert-layer;
hyphenate-limit-chars: unset;

hyphenate-limit-chars 屬性接受 1 到 3 個值，這些值可以是數字或 auto，如下所述。

值

<number> <number> <number>

第一個值是單詞可以斷字的最小單詞長度。第二個值是連字元前的最小字元數。第三個值是連字元後的最小字元數。

<number> <number>

第一個值是單詞可以斷字的最小單詞長度。第二個值是連字元前的最小字元數。連字元後的最小字元數將設定為與第二個值相同。

<number>

該值是單詞可以斷字的最小單詞長度。連字元前後的最小字元數將設定為 auto。

如果任何值設定為 auto，使用者代理將為當前佈局選擇一個適當的值。除非使用者代理能夠計算出更好的值，否則將使用以下預設值：

• 允許斷字的最小單詞長度：5
• 連字元前的最小字元數：2
• 連字元後的最小字元數：2

請注意，如果單詞太短而無法滿足給定約束，則不會進行斷字處理。例如，給定一個像 hyphenate-limit-chars: auto 3 4 這樣的值，少於 7 個字元的單詞永遠不會進行斷字處理，因為不可能在連字元前有 3 個字元，在連字元後有 4 個字元。

正式定義

正式語法

hyphenate-limit-chars = 
  [ auto | <integer> ]{1,3}  

示例

設定斷字限制

在此示例中，我們有四個包含相同文字的盒子。為了進行比較，第一個盒子顯示了瀏覽器應用的預設斷字。接下來的三個盒子演示了使用不同的 hyphenate-limit-chars 值限制瀏覽器預設行為的結果。

HTML

<div class="container">
  <p id="ex1">juxtaposition and acknowledgement</p>
  <p id="ex2">juxtaposition and acknowledgement</p>
  <p id="ex3">juxtaposition and acknowledgement</p>
  <p id="ex4">juxtaposition and acknowledgement</p>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

p {
  margin: 1rem;
  width: 120px;
  border: 2px dashed #999999;
  font-size: 1.5rem;
  hyphens: auto;
}

#ex2 {
  hyphenate-limit-chars: 14;
}

#ex3 {
  hyphenate-limit-chars: 5 9 2;
}

#ex4 {
  hyphenate-limit-chars: 5 2 7;
}

結果

在第一個盒子中，我們沒有設定 hyphenate-limit-chars，允許瀏覽器應用其預設演算法。預設情況下，瀏覽器使用值 5 2 2，除非它能找到更好的值。

在第二個盒子中，我們透過設定 hyphenate-limit-chars: 14 來阻止瀏覽器對少於 14 個字元的單詞進行斷字處理。結果，“juxtaposition”在第二個盒子中沒有被斷字，因為它只有 13 個字元長。

在第三個盒子中，我們透過設定 hyphenate-limit-chars: 5 9 2 來限制瀏覽器在連字元前至少包含 9 個字元。效果是“acknowledgement”現在斷字為“acknowledge-ment”，而不是第一個盒子中顯示的預設版本“acknowl-edgement”。

請注意，瀏覽器不必在連字元前精確地包含 9 個字元：只要滿足 hyphenate-limit-chars 中給出的約束，瀏覽器就可以在它認為最好的位置斷開單詞。因此，在這種情況下，例如，它選擇“acknowledge-ment”，而不是可讀性較差的“acknowled-gement”。

在第四個盒子中，我們透過設定 hyphenate-limit-chars: 5 2 7 使瀏覽器在連字元後至少包含 7 個字元。效果是“juxtaposition”斷字為“juxta-position”，而不是預設的“juxtaposi-tion”。

規範

瀏覽器相容性

另見

• hyphens
• CSS 文字模組