CSS hyphens:auto在Microsoft Edge中偶发失效问题排查

问题背景 #

根据caniuse显示，CSS属性hyphens:auto应在Edge 105及以上版本生效，但实际使用中偶发失效。测试情况：

• Firefox中显示正常
• Edge 108完全无连字符效果
• 部分Edge 110系统表现正常，升级至110后仍存在同版本不同系统的表现差异

疑问列表 #

1. 我们的CSS或HTML是否存在问题？
2. Edge 108的hyphens:auto是否存在bug？
3. Edge是否有隐藏设置或管理员可配置的连字符禁用选项？
4. 是否存在其他未知原因？

测试代码 #

CSS代码 #

body {
  word-break: break-word;
  hyphens: auto;
}

HTML代码 #

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
</head>

<body>
  <table style="width:100%">
    <thead>
      <tr>
        <th style="width:50%">
          <h1 lang="de">Donaudampfschifffahrtsgesellschaftkapitän</h1>
        </th>
        <th style="width:50%">
          <h1 lang="en">A superextraordinarily long English word!</h1>
        </th>
      </tr>
    </thead>
  </table>
  <div id="navigator" />
  <script type="text/javascript">
    document.getElementById("navigator").innerText = navigator.userAgent;
  </script>
</body>

</html>

问题解答 #

1. CSS/HTML是否存在问题？ #

代码整体没问题，但有几个细节会影响效果：

• word-break: break-word 和 hyphens:auto 同时使用时，部分浏览器会优先触发word-break的强制换行，跳过连字符处理。可以移除word-break: break-word，或者替换为overflow-wrap: break-word（功能相近，但对连字符兼容性更好）。
• 建议在<html>标签上添加全局lang属性，比如<html lang="de">或根据页面主语言设置。浏览器需要明确的语言信息来加载对应的连字符字典，仅在<h1>上设置可能不够稳定。

2. Edge 108是否存在hyphens:auto的bug？ #

是的，Edge 108确实存在该属性的已知兼容性问题。基于Chromium的Edge在108版本中，对部分非英语语言的连字符支持不稳定，部分场景下会完全失效。这个问题在后续109、110版本中得到了部分修复，但同版本不同系统的差异说明修复并不彻底。

3. Edge是否有隐藏设置或管理员配置的禁用选项？ #

有两种可能：

• 浏览器本地flags设置：在Edge地址栏输入edge://flags#enable-css-hyphens，检查Enable CSS hyphens选项状态。如果被设为Disabled，会强制关闭连字符功能，需改为Default或Enabled。
• 企业管理员策略：企业环境中，管理员可通过组策略或MDM配置禁用CSS连字符，对应策略项为Disable CSS hyphens。如果该策略启用，浏览器会直接忽略hyphens:auto设置。

4. 其他未知原因？ #

还有几个潜在因素：

• 字体兼容性：部分字体没有内置连字符规则表，浏览器无法获取连字符断点，导致属性失效。可以切换系统默认字体（如Arial、Times New Roman）测试是否恢复。
• 容器布局干扰：表格单元格的布局计算可能影响浏览器的连字符判断逻辑，尝试将<h1>放在普通<div>容器中测试，排除表格布局的影响。
• 系统语言包缺失：如果系统未安装对应语言的语言包，浏览器无法加载连字符字典。比如显示德语单词时，系统需安装德语语言包才能正确触发连字符。

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