如何使<legend>文本包装？

Question

通常，<legend>文本很短，所以直到昨天我才发现这是个问题。我试图在<fieldset>上设置50%的宽度，但由于长的图例文本，它无法工作。字段集将不小于图例，或者图例的宽度超过字段集的宽度。

这似乎不是IE8，Chrome，Safari，Opera，或者其他的问题。这是火狐、IE6和IE7中的一个问题。

目标：获取文本以在<legend>跨浏览器中包装

• 不设置任何固定宽度
• 希望没有额外的标记
• 没有javascript
• 如果以上不可能的话，我们可以尽一切可能
• 而不用放弃和使用不同的标记

我看过这篇文章：获取图例标记以正确包装文本

...But只有一个答案，在图例标签中使用一个固定宽度的<div>，我实际上无法让它工作(请参阅小提琴)，OP以“最后我们放弃了”的评论结束。在谷歌上搜索这个主题也会出现很多“不多”的现象。

我用我尝试过的一些CSS安装了一个小提琴演示。就像我说过的，我从来没有遇到过这样的事情，所以我很困惑，因为这是如此的困难，而且我似乎无法得到任何东西去工作。真的不可能吗？

Answer 1

将white-space: normal;添加到图例中，除在IE7和IE6中外，效果都很好。请看这个小提琴演示

在玩了一些CSS之后，我让它在IE7、IE8、IE9、F3-4和Chrome11上工作，在<legend>中添加了一个<span>，下面的CSS如下：

legend {
    white-space: normal; 
    width: 100%;
    *margin-left: -7px;
}
legend span {
    display:block;
    width: 100%;
}

请看一下这个小提琴

Answer 2

这个问题已经有一段时间没有发布了，但是现在IE10已经在这里呆了一段时间了，而且还在这么“现代”。此外，一个人没有能力使用条件注释。诀窍是什么：

legend {
  white-space: normal;
  display: table; /* IE10 */
}

Answer 3

将white-space:normal添加到图例中，以强制将文本包装。

legend{
    color:green;
    white-space:normal;
}

有关更多信息，请阅读本文：传说/