CSS hyphens:auto对部分单词无效原因探究——以Sustainability为例

我在Google Chrome、FireFox和Safari中测试了以下代码，三款浏览器都无法对首字母大写的单词“Sustainability”执行连字，但能正确处理“hyphenated”一词。

我的观察结果：

• 若单词首字母不大写，连字功能即可正常生效
• 若将lang属性从en改为de（德语），连字功能也会生效，尽管该单词是英语单词

代码片段：

:root {
  font-size: 20px;
  font-family: system-ui;
  padding: 2rem;
}
body {
  margin: 0;
}
p {
  border: 1px solid;
  width: 100px;
  hyphens: auto;
}

<html lang="en">
  <body>
    <p>The word Sustainability can't be hyphenated, apparently</p>
    <p>Only if written without a capital "S", it starts working: sustainability 🤔</p>
  </body>
</html>

• 首字母大写导致连字失效的核心原因：英文的自动连字规则默认不会对首字母大写的单词（无论是句首单词还是专有名词）应用连字。浏览器遵循英文语言的排版习惯，认为这类单词的识别优先级高于排版换行需求，因此hyphens: auto模式下会跳过对它们的连字处理。

• 切换为德语lang="de"生效的原因：德语的连字规则对大写单词的限制远少于英文，即使是英语单词，当页面lang设为de时，浏览器会加载德语的连字字典来处理文本，而德语字典允许对大写单词执行连字，因此就能正常生效。

• 强制大写单词连字的办法：如果需要让首字母大写的单词也能自动连字，可以尝试两种方式：一是使用hyphens: manual，在单词中插入软连字符­（比如Sus­tain­ability）；二是检查是否有支持宽松连字规则的字体或自定义连字字典，但默认的系统字体+hyphens: auto模式下，英文规则就是优先不处理大写单词。

内容的提问来源于stack exchange，提问作者rassoh