通常<legend>文字很短，所以我不知道这是一个问题，直到我昨天遇到它。我正在尝试并且未能在<fieldset>上设置50％的宽度，但由于长的图例文本而无法正常工作。字段集不会小于图例，或者图例的宽度超过字段集的宽度。
这个 似乎不是IE8，Chrome，Safari，Opera和其他人的问题。 在Firefox，IE6和IE7中是的一个问题。
目标：获取文字以换行<legend>跨浏览器
我看过这篇文章：Getting LEGEND tags to wrap text properly
...但是只有一个答案在图例标记内使用固定宽度的<div>，我实际上无法使其工作（请参阅小提琴），并且OP已关闭评论“最后我们放弃了”。谷歌搜索这个主题也会产生很多“不多”。
我提出了jsfiddle demo一些我试过的CSS。就像我说的那样，我以前从未遇到过这种情况，所以我很困惑，这很困难，我似乎无法得到任何工作。这真的不可能吗？
答案 0 :(得分：19)
除了IE7和IE6之外，向图例添加white-space: normal;的工作正常。请参阅此jsfiddle demo
在使用CSS玩了一下之后，我在IE7，IE8，IE9，FF3-4和Chrome11上使用<span>在<legend>内添加了以下CSS：< / p>
legend {
white-space: normal;
width: 100%;
*margin-left: -7px;
}
legend span {
display:block;
width: 100%;
}
请查看此jsfiddle
答案 1 :(得分：8)
自问题发布以来已经有一段时间了，但现在IE10已经存在了一段时间，而且仍然是sux而且是如此'现代'。另外一个人没有能力使用条件评论。这就是诀窍：
legend {
white-space: normal;
display: table; /* IE10 */
}
答案 2 :(得分：5)
将white-space:normal添加到图例中以强制文字换行。
legend{
color:green;
white-space:normal;
}
答案 3 :(得分：3)
尝试这种更简单的方法：
legend{
color:green;
white-space: normal;
}
那应该把你的传奇排除在外。你的下一个问题变成了你的fieldset的背景颜色，但是这很容易通过将整个东西包装在一个div中来解决。
答案 4 :(得分：0)
如果有人需要一个适用于Microsoft Internet Explorer 11和Edge的修复程序，同时又不干扰Chrome / Firefox / Safari：
legend {
display: table;
max-width: 100%;
}