CSS hyphens 为什么需要配合正确的 lang 属性

CSS hyphens:auto 不是单独决定断词位置的开关。浏览器还需要知道这段文字属于哪种语言，才能选择相应的断词规则和词典，所以同样的 CSS 在缺少 lang、语言标错或没有可用词典时，可能完全看不到自动连字符。最稳妥的做法是让 HTML 的语言标注与实际内容一致，再只在需要改善窄列排版的文本区域启用 hyphens。

官方资料：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/hyphens

如果 hyphens:auto 不生效，先检查文本节点继承到的 lang，再检查是否被 word-break:break-all 等规则改变了换行方式。lang 不是装饰属性，而是自动断词算法选择语言规则的输入。

lang 是 hyphens:auto 的规则输入

hyphens:auto 允许浏览器在合适的位置把单词拆到两行，但“合适”并不是一个对所有语言都相同的固定位置。英文、德文等语言有各自的词形和连字符规则，浏览器要先从 lang 判断应使用哪一套规则；如果没有语言标注，或者标注与正文语言不符，自动断词就可能不发生，或产生不符合预期的断点。

lang 可以写在文档根元素上并由子元素继承，也可以给一段混合语言单独标注。重点是描述内容语言，而不是用户界面语言。例如页面主体是中文，但其中一段英文产品说明应给这段英文加 lang="en"。

用正确的语言标注开启自动断词

下面的示例把语言写在实际英文内容所在的元素上。CSS 只负责声明排版意图，HTML 的 lang 负责提供语言上下文；两者缺一时，自动断词就没有完整的输入。

A long English word can be split when the column becomes narrow.

.reading-column {
  /* 只在需要优化长单词换行的阅读列启用自动断词。 */
  hyphens: auto;
  /* 保留普通空白处的自然换行，不用 break-all 粗暴拆字。 */
  overflow-wrap: normal;
}

真实项目中可以把 lang 放在更大的容器上，但要留意组件是否跨越了语言边界。若同一页面同时包含中文和英文，不要为了省一个属性而让所有内容继承 lang="en"；错误的语言上下文会让自动断词和读屏语义一起变得不可靠。

混合语言与手动断点要单独标注

当一段中文中夹有英文术语时，中文外层和英文片段可以使用不同语言标注。中文通常不会像英文一样显示连字符，不能因为设置了 hyphens:auto 就期待所有汉字之间出现可见的短横线；这时真正要处理的是英文片段的单词断行，以及中文本身的正常换行策略。

  
  本文介绍
  internationalization
  在窄列中的换行方式。

.english-term {
  /* auto 依据英文 lang 选择可用的自动断词规则。 */
  hyphens: auto;
}

.manual-term {
  /* manual 只在文本明确提供断点时才允许断开。 */
  hyphens: manual;
}

需要固定一个可接受的断点时，可以在单词内部放入不可见的软连字符 ­。它只有在浏览器确实在该处换行时才显示连字符；如果整词没有被拆开，软连字符不会出现在正常文本中。

  
  inter­nationalization

为什么设置了 hyphens 仍然看不到连字符

可以按下面的顺序排查，但不要把每一项都归因于 CSS 属性本身：

• 先看语言：检查目标元素实际继承到的 lang，并确认它与文字语言一致。只有语言存在且浏览器有合适的断词资源，auto 才有机会工作。
• 再看文本：单词太短、容器足够宽，或者当前布局没有触发换行时，不会出现连字符。hyphens:auto 不是强制把每个单词拆开。
• 排除规则冲突：word-break:break-all 可以在任意字符处断开，而且不会显示连字符；text-wrap-mode:nowrap 则直接禁止换行。这两种声明都会让你误以为 hyphens 失效。
• 区分语言习惯：中文排版的换行预期与英文词典断词不同。对混合内容，把英文术语包在明确的 lang="en" 元素里，不要只给整个中文页面套一个英文语言。

把断词问题收敛成三项检查

先确认内容的语言语义，再选择自动或手动断点，最后检查其它换行属性有没有改变目标效果。对英文长词，正确的 lang 与 hyphens:auto 通常是一个组合；对中英文混排，应该把语言标注下沉到实际的英文片段。这样既能让浏览器选择更合适的断词规则，也能避免用 break-all 解决溢出后留下难读的行尾。

只设置 lang，不设置 hyphens 可以吗？

可以。lang 首先是文档语义和辅助技术需要的语言标注，不以是否使用连字符为前提；只有需要自动断词时再加 hyphens:auto。

hyphens:manual 和硬连字符有什么区别？

­ 是不可见的软断点，只有实际在该处换行时才显示连字符；普通的硬连字符本身可见，即使行没有断开也会显示。

为什么自动断词在一台设备上有效，另一台没有？

除了语言标注和 CSS 冲突，还要考虑浏览器是否提供对应语言的断词资源。文章中的静态说明图用于解释关系，不代表某个浏览器或设备的实际运行结果。