关于overflow-wrap: break-word对表意空格(U+3000)换行行为的疑问

问题背景 #

• 给包含长序列Unicode Zs类空白符的文本应用overflow-wrap: break-word时，Chrome仅对**表意空格（U+3000）**不做换行处理，其他Zs类空白符（如普通空格U+0020、不间断空格U+00A0等）均可正常换行；而Safari中所有Zs类空白符都能正常换行。
• 需要在Chrome中让表意空格和其他空白符一样换行，但不想用white-space: break-spaces——该属性会保留文本里的多余空白符，带来不符合预期的排版副作用。

规范与实现分析 #

CSS规范里，overflow-wrap: break-word的定义是允许在原本不可换行的位置（比如长单词内部）换行，但没明确规定对Zs类空白符的细分处理。两款浏览器的表现差异大概率是Chrome的实现bug：表意空格属于Unicode Zs类（空格分隔符），理应和其他空白符遵循同样的换行规则。

可行解决方案 #

方案1：使用overflow-wrap: anywhere #

overflow-wrap: anywhere是break-word的增强版本，它会忽略white-space的默认限制，允许在任何可能的位置（包括表意空格处）换行，同时不会改变white-space对多余空白符的折叠行为，完美规避break-spaces的副作用。

示例代码：

.target-element {
  overflow-wrap: anywhere;
}

方案2：Chrome专属CSS Hack（备选） #

如果要兼容不支持anywhere的旧版本浏览器，可以利用Chrome的特定行为，结合word-break属性：

.target-element {
  overflow-wrap: break-word;
  /* 仅对Chrome生效，强制表意空格处换行 */
  @supports (-webkit-appearance: none) {
    word-break: break-all;
    /* 避免影响非空白符的正常换行逻辑 */
    overflow-wrap: normal;
  }
}

注意：此方案需测试验证，避免对其他文本内容的排版产生干扰。

验证说明 #

在Svelte页面中测试上述方案：

• 应用overflow-wrap: anywhere后，Chrome里长序列表意空格会正常换行，表现和Safari一致；
• 文本中的多余空白符仍会被正常折叠，没有white-space: break-spaces的副作用。

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