Firefox中相邻span元素旁CSS white-space: normal属性失效问题咨询

结论 #

这是Firefox的排版逻辑实现差异，不属于CSS规范歧义。

原因解释 #

CSS规范中没有明确规定跨相邻行内元素的空白符换行判定规则，不同浏览器的实现逻辑不同：

• 父元素p设置了white-space: nowrap，所有未重写该属性的子节点默认禁止换行
• 你的.allow-break元素仅包含单个空格，Chrome会将这个空格和前后相邻的内容纳入同一个换行判定上下文，只要空格允许换行，就可以在该位置断行
• Firefox的行级排版逻辑中，相邻行内元素的边界会阻断跨元素的换行判定：当空格后是另一个无样式span时，Firefox会将两个行内元素视为独立的不可拆分单元，受父级nowrap规则限制，两个单元之间不会触发换行；当空格后是普通文本时，文本和空格属于同一个排版上下文，可以正常换行。

修复方案 #

可以任选以下方案兼容Firefox：

• 给所有与.allow-break相邻的行内元素也添加white-space: normal属性
• 替换实现逻辑，直接在需要允许换行的位置插入<wbr>标签，无需全局设置white-space: nowrap，全浏览器兼容
• 给.allow-break元素额外添加零宽空格，强制触发换行判定：

.allow-break::after {
    content: "\200B";
}

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