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 文本模块