Chrome与Firefox中overflow-wrap渲染差异：是否为浏览器Bug？

这种Chrome与Firefox的渲染差异，不是某款浏览器的Bug，两种处理方式都符合CSS规范的定义——问题出在规范对「行内可用空间计算」的细节描述存在模糊性，导致浏览器实现逻辑不同。

核心原因拆解 #

1. 浮动元素的布局挤压：容器.container宽度350px，四个.f元素每个宽110px，两个左浮、两个右浮的总宽度（440px）远超容器宽度，因此右浮动元素会被挤到左浮动元素的下方，占据了容器内的部分垂直空间。
2. overflow-wrap的触发条件差异：
   • Chrome认为下方<p>的文本行可用空间被浮动元素压缩，不足以完整容纳“Hello world”，因此触发overflow-wrap: break-word进行断字换行。
   • Firefox则将<p>的文本视为占据浮动元素下方的完整行空间，认为可用宽度足够容纳整段文本，因此不触发断字。

CSS规范对「浮动元素与后续块级元素文本行的空间交互」没有做绝对明确的约束，所以两种浏览器的处理逻辑都在规范允许范围内。

复现代码 #

CSS代码

.container {
  text-align: center;
  width: 350px;
  overflow-wrap: break-word;
}

.f {
  display: inline-block;
  width: 110px;
  height: 16px;
  background: black;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

HTML代码

<div class="container">
  <p>
    <span class="f fl"></span><span class="f fl"></span>
    <span class="f fr"></span><span class="f fr"></span>
  </p>
  <p>
    Hello world
  </p>
</div>

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