获取LEGEND标签以正确包装文本

图例标签总是令人讨厌，因为它们不符合大量的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＃标签？

来源

2010-03-25 DA.

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

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

这至少是一种替代，除非你必须使用<span>标签。

来源

2010-03-26 06:05:30 Structure

呜！这确实有效。谢谢！但最后，我们放弃了LEGEND。另一个问题是图例不符合与其容器成比例的宽度，而我们可以使用div来使其与包含固定像素宽度的图片相匹配，但我们无法根据其父项进行动态调整，因此最终变得太过了复杂。我们切换到标题标签。 – 2010-03-26 17:55:41

正试图让同样的事情工作。在我的方案的Firefox需要

legend {white-space:normal;}

来源

2011-11-15 16:13:30 Jarrett

获取LEGEND标签以正确包装文本

回答

相关问题