为什么这个“word-wrap: break-word”规则在 Firefox 中没有按预期工作？

Question

为什么 word-wrap: break-word CSS 规则在 Firefox 中不收缩元素，而相应的规则在 Chrome 中有效？

这里的.form-field容器被限制为300px宽度，里面的legend宽度为100%。里面的长字把 legend 拉长溢出了 300px 的宽度。

当我使用（非标准）WebKit word-break 定义将 CSS break-word 规则应用于 Chrome 时，长字被破坏并且 legend 元素缩小到预期宽度 300px。

在 Firefox 中，相应的 word-wrap 规则不会打断文本并缩小元素，除非我专门将 legend 的宽度设置为 300px。为什么我必须这样做？为什么 Firefox 不能正确计算“100% of 300px”并调整 legend 的大小？

如果您在 Firefox 上查看此代码段，您会看到 legend 仍然溢出其容器的 300 像素宽度。

.form-field {
  border: none;
  padding: 0;
  max-width: 300px;
  margin: 0 auto 10px;
  outline: 1px solid purple;
}

.form-field legend {
  text-align: left;
  width: 100%;
  word-wrap: break-word;
  word-break: break-word;
}

.form-field input[type=text] {
    width: 100%;
    font-size: 16px;
    padding: 7px 14px;
    box-sizing: border-box;
    border: 1px solid #c8d7e1;
}

<fieldset class="form-field">
  <legend>Betweenthesetwo, InowfeltIhadtochoose. Mytwonatureshadmemoryincommonbutallotherfacultiesweremostunequallysharedbetweenthem.</legend>
  <input type="text">
</fieldset>

（在 macOS Chrome 64 和 Firefox 57 中测试）。

Answer 1

word-break 的值 break-word 在 Firefox 中不受支持。检查 MDN documentation，您将看到：

Answer 2

更新 CSS 图例

.form-field legend {
  text-align: left;
  width: 100%;
  word-wrap: break-word;
  word-break: break-all; // Modified 
}

Answer 3

我们只需要

word-break: break-all;

为什么这个“word-wrap: break-word”规则在 Firefox 中没有按预期工作？

Why does this `word-wrap: break-word` rule not work as expected in Firefox?

css

firefox

width

word-wrap

word-break