为什么这个 `word-wrap: break-word` 规则在 Firefox 中不能按预期工作？答案

【问题标题】：Why does this `word-wrap: break-word` rule not work as expected in Firefox?为什么这个 `word-wrap: break-word` 规则在 Firefox 中不能按预期工作？
【发布时间】：2018-03-03 09:39:56
【问题描述】：

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

这里的 .form-field 容器被限制为 300px 宽度，其中的 legend 具有 100% 的宽度。里面的长字将legend 拉伸到溢出300px 的宽度。

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

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

如果你在 Firefox 上查看这个 sn-p，你会看到 legend 仍然会溢出其容器的 300px 宽度。

.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 中测试）。

【问题讨论】：

标签： css firefox width word-wrap word-break

【解决方案1】：

Firefox 不支持 word-break 的值 break-word。检查MDN documentation，你会看到：

【讨论】：

感谢@temani-afif，这很令人困惑，overflow-wrap 的 MDN 文档暗示 FF 支持 overflow-wrap: break-word。同样caniuse.com/#search=word-wrap 暗示FF 支持同义词规则word-wrap: break-word。如果这是真的，为什么word-wrap 规则不起作用？
感谢@temani-afif，该链接正是我所需要的，非常有用！也许应该调整您的答案以强调问题不在于word-wrap 规则，而在于FF 对fieldset 的处理。
@AndFinally 是的，就是这样 :) 你只对 firefox 的断词有问题；)

【解决方案2】：

更新图例的 CSS

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

【讨论】：

【解决方案3】：

我们只需要

word-break: break-all;

【讨论】：