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 #999;
  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，除非它可以找到更好的值。

在第二个框中，我们阻止浏览器对单词进行断字，除非它们至少有 14 个字符长，方法是设置 hyphenate-limit-chars: 14。结果，“juxtaposition”在第二个框中没有断字，因为它只有 13 个字符长。

在第三个框中，我们约束浏览器在连字符之前至少包含 9 个字符，方法是设置 hyphenate-limit-chars: 5 9 2。“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 文本模块