连字符限制字符 | CSS-Tricks

CSS 中的 hyphenate-limit-chars 属性告诉浏览器在对单词进行连字符处理之前单词应该有多少个字符，以及连字符前后字符的最小数量。这样，我们可以避免尴尬的连字符处理，使我们能够在单词从一行到另一行流动的方式上获得更大的控制权。

.element {
  hyphens: auto;
  hyphenate-limit-chars: 10 3 4;
}

在上面的 CSS 规则中，最后一个声明指示浏览器只对 10 个字符或更多字符的单词进行连字符处理，并且在进行连字符处理时，连字符前的字符数至少为 3 个，连字符后的字符数至少为 4 个。请注意，如果在样式表中的其他位置设置了 hyphens: none;，则只需要 hyphens: auto; 使连字符处理启用。

hyphenate-limit-chars 包含在 CSS 文本模块级别 4 规范中，该规范目前处于草案状态。这意味着该定义仅用于讨论，随时可能更改。

语法

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

初始值：auto
应用于：文本
继承：是
计算值：三个值，每个值都是 auto 关键字或一个整数
动画类型：按计算值类型

如果第三个值未指定，则使用与第二个值相同的值。如果第二个值和第三个值都未指定，则评估为 auto，这意味着用户代理会根据语言和布局确定最佳方案。

hyphenate-limit-chars 的默认值 auto 等效于 5 2 2（即单词长度为 5，连字符前后字符的最小数量为 2）。

值

hyphenate-limit-chars: auto;
hyphenate-limit-chars: 8 2 4;
hyphenate-limit-chars: 8 2; /* 8 2 auto */
hyphenate-limit-chars: 8; /* 8 auto auto */

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

浏览器支持

hyphenate-limit-chars 属性由 Edge 和 Internet Explorer 10+ 以及 -ms 前缀支持。它也由 Safari 以及 -webkit-hyphenate-limit-before 和 –webkit-hyphenate-limit-after 支持，它们都是旧属性。顾名思义，-webkit-hyphenate-limit-before 指定连字符前的最小字符数，而 –webkit-hyphenate-limit-after 指定连字符后的最小字符数。

将所有这些放在一起，我们有

.element {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;

  -webkit-hyphenate-limit-before: 3; /* For Safari */
  -webkit-hyphenate-limit-after: 4; /* For Safari */
  -ms-hyphenate-limit-chars: 10 3 4;
  hyphenate-limit-chars: 10 3 4;
}