当相应的规则在Chrome中有效时,为什么word-wrap: break-word
CSS规则不会缩小Firefox中的元素?
这里的.form-field
容器被限制为300px宽度,并且其内部的legend
具有100%宽度。里面的长字将legend
拉出来溢出300px的宽度。
当我使用(非标准)WebKit break-word
定义将CSS word-break
规则应用于Chrome时,长字被破坏并且legend
元素缩小到预期宽度300px。
在Firefox中,相应的word-wrap
规则不会破坏文本并缩小元素,除非我专门将legend
的宽度设置为300px。为什么我要这样做?为什么Firefox没有正确计算“100%300px”计算和大小legend
?
如果您在Firefox上查看此代码段,您会看到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中测试过)。
Firefox不支持break-word
的值word-break
。检查MDN documentation,你会看到:
更新图例的CSS
.form-field legend {
text-align: left;
width: 100%;
word-wrap: break-word;
word-break: break-all; // Modified
}
我们所需要的只是
word-break: break-all;