为什么这个`word-wrap：break-word`规则在Firefox中无法正常工作？

Question

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

此处的.form-field容器限制为300px宽度，其中的legend宽度为100％。内部的长单词将legend拉出以溢出300px的宽度。

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

在Firefox中，相应的word-wrap规则不会破坏文本并缩小元素，除非我专门将legend的宽度设置为300px。为什么我要这样做？为什么Firefox没有成为300px＆＃34; 100％的300px＆＃34;正确计算和调整legend的大小？

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

Firefox不支持break-word的值word-break。检查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;