Getting LEGEND tags to wrap text properly

Question

Legend tags are always a nuisance as they don't adhere to a lot of CSS rules.

I'm trying to get the text within a LEGEND tag to wrap using the typical solution of wrapping the text in the LEGEND with a span and setting the width and display: block.

 <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>

I thought this used to work In Firefox, but does not appear to work anymore in 3.6. Sample:

http://jsbin.com/exeno/5

It still works in IE.

Has anyone found a fix for this or is it just a matter of forgoing LEGEND tags and go back to H# tags?

Answer 1

Is it a requirement to use the <span> tag? I was able to get this working in Firefox 3.6.2 using a <div> tag and removing the dislay: block; element (as it is not needed in that case) as follows.

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

It is at least an alternative unless you must use the <span> tag.

Answer 2

Was trying to get the same thing to work. In my scenario Firefox needed

legend {white-space:normal;}