Chrome中word-break: break-all的异常换行问题及解决方法

以下是测试代码：

CSS代码 #

div {
  width: 310px;
  border: 1px solid #000;
  word-break: break-all;
  font-family: monospace;
}

HTML代码 #

<div>
aaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa:::::::::::::::::\aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

浏览器表现差异 #

• Firefox：文本按容器宽度均匀换行，每行约44个字符，符合预期。
• Chrome：遇到连续冒号和反斜杠时，换行位置异常，没有按字符数均匀拆分，出现较长的连续符号行。

原因分析 #

Chrome与Firefox对word-break: break-all的实现细节存在差异。Chrome在处理连续的标点符号（如冒号、反斜杠）时，会将这类符号序列视为一个整体，优先保留其连续性，导致换行逻辑偏离了按字符均匀拆分的预期，这属于不同浏览器对CSS换行规则的差异化实现。

解决方案 #

要实现跨浏览器的均匀换行，只需将CSS中的word-break: break-all替换为overflow-wrap: anywhere，该属性会强制浏览器在任意字符位置进行换行，完全忽略符号的特殊处理逻辑：

div {
  width: 310px;
  border: 1px solid #000;
  overflow-wrap: anywhere;
  font-family: monospace;
}

如果需要兼容更旧的浏览器，也可以同时保留word-break: break-all作为兜底：

div {
  width: 310px;
  border: 1px solid #000;
  word-break: break-all;
  overflow-wrap: anywhere;
  font-family: monospace;
}

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