CSS自动断字（hyphens）对英文无效？为何lang="en"不生效而德语可用

问题现象 #

设置lang="en"的英文单词无法通过hyphens:auto实现自动断字，但lang="de"的同个单词却能正常断字；将英文单词改为小写后，断字功能又能正常生效。

代码示例 #

CSS 代码 #

.text {
  width: 60px;
  height: 60px;
  border: 1px solid black;
  hyphens: auto;
}

HTML 代码 #

<div class="text" lang="en">
Unbreakable
</div>
<div class="text" lang="de">
Unbreakable
</div>

原因分析 #

1. 语言断字规则的差异
   浏览器的自动断字依赖对应语言的内置断字规则字典：

• 德语语法中名词本身要求大写开头，所以德语断字字典会默认处理这类大写单词，不会将其归为特殊词汇。
• 英文里，大写开头的单词通常被识别为专有名词（比如品牌名、人名、特定术语），浏览器为了避免破坏专有名词的辨识度，默认不对这类单词执行自动断字。

2. 小写单词的断字逻辑
   当英文单词改为小写后，浏览器会将其判定为普通通用词汇，匹配英文断字字典中的常规断字规则，此时hyphens:auto就能正常触发自动断字。

注：Chrome、Firefox等主流浏览器的断字逻辑都遵循这一规则，核心是通过单词大小写判断词汇类型，再调用对应语言的断字规则。

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