css - 获取 LEGEND 标签以正确换行文本

Question

图例标签总是令人讨厌，因为它们不遵守许多 CSS 规则。

我正在尝试使用典型的解决方案来包装 LEGEND 标记中的文本，该解决方案使用跨度将文本包装在 LEGEND 中并设置宽度和显示：块。

 <legend>
    <span style="border: 1px solid blue; width: 250px; display: block">
        This text should wrap if it gets longer than 250px in width
    </span>
 </legend>

我认为这曾经在 Firefox 中有效，但在 3.6 中似乎不再有效。样本：

http://jsbin.com/exeno/5

它仍然适用于 IE。

有没有人找到解决此问题的方法，或者只是放弃 LEGEND 标签并返回 H# 标签的问题？

Answer 1

试图让同样的事情发挥作用。在我的场景中需要 Firefox

legend {white-space:normal;}

Answer 2

是否需要使用<span>标签？我能够在 Firefox 3.6.2 中使用<div>标签并删除dislay: block;元素（因为在这种情况下不需要），如下所示。

<legend>
    <div style="border: 1px solid blue; width: 250px;">
        This text should wrap if it gets longer than 250px in width
    </div>
 </legend>

除非您必须使用<span>标签，否则它至少是一种替代方法。