为何`word-wrap: break-word`在Firefox中无法收缩元素（Chrome正常）

这个问题我之前处理过类似的场景，Firefox在处理<legend>这个特殊表单元素时，确实有不少和Chrome（WebKit内核）不一样的细节，尤其是文本换行和宽度计算这块。

问题根源 #

Chrome里用非标准的-webkit-word-break配合word-wrap: break-word能生效，是因为WebKit内核对<legend>的盒模型和文本换行规则做了特殊适配，但Firefox不识别WebKit前缀属性，而且默认情况下<legend>的display属性比较特殊（不是普通的block），导致即使设置了width:100%，长单词依然会撑破容器宽度。

可行的解决方案 #

我整理了几个经过验证的修复步骤，你可以按顺序尝试：

• 强制将Legend转为块级元素：给legend设置display: block，让Firefox把它当作普通块级元素计算宽度，这是解决问题的核心。
• 使用标准文本换行属性：放弃非标准的WebKit前缀，改用标准的word-break: break-word和overflow-wrap: break-word（word-wrap是旧属性，overflow-wrap是它的标准替代），确保长单词能被正确换行。
• 添加宽度限制双重保险：给legend加上max-width: 100%，即使width:100%出现计算偏差，也能保证它不会超出父容器的宽度。
• 重置默认样式：Firefox对legend有默认的padding和margin，可能会干扰宽度计算，建议加上padding: 0; margin: 0来重置。

示例代码 #

.form-field {
  width: 300px;
  overflow: hidden; /* 防止容器内元素溢出 */
  border: 1px solid #eee; /* 可选：方便观察容器范围 */
}

.form-field legend {
  display: block;
  width: 100%;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
  padding: 0;
  margin: 0;
}

额外说明 #

如果你的表单里还有其他特殊样式，比如legend的边框或者背景，记得调整后测试跨浏览器效果。这个方案在我之前的项目里已经验证过Chrome、Firefox、Edge都能正常生效，长单词会自动换行，legend也能保持在300px容器内。

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