Line wrapping text in legend elements

In some cases you should Use the fieldset and legend elements to group HTML form controls. One problem that may lead to though is when the legend text is too long to fit the width of its containing fieldset element.

It could be because the legend text simply is longer than it really should be (legend texts should be as brief as possible) or because its parent fieldset isn’t wide enough (it may be displayed in a narrow column, for instance). The end result is the same – most browsers do not line wrap legend text but keep it all on one line. This in turn can lead to legend text overlapping other parts of the page and becoming hard to read, especially if text size is increased a bit.

Recently I had a reason to try to find a workaround, and I managed to come up with something that seems to work in most browsers. Not all of them, and not in all versions, but it does work for the majority of users.

Opera and Safari (not sure from which versions or they always have) line wrap legend text by default. No extra CSS necessary. A little white-space:normal fixes Firefox 3.

IE 8 doesn’t care about white-space:normal, but float:left works. That doesn’t work for IE 6 or 7, however. Luckily, wrapping the contents of the legend element in a span element and floating that does work.

You can’t just float the legend and span elements in your main stylesheet though, since that will have unwanted effects in several browsers. So you need to make sure only IE sees that rule.

One more problem is that in IE 8, if the legend text does not wrap, the floated legend causes problems, so you need to clear the float somehow. The only solution to that problem I’ve been able to find is to wrap the rest of the `fieldset` content in a `div` element. Yeah, it’s messy.

Summing it all up, the CSS that will make text in a legend element wrap in most browsers is this:

  1. /* For all browsers */
  2. legend {white-space:normal;}
  3. /* For Internet Explorer only - put in a separate file and load it with conditional comments or find a CSS hack that works with IE 8 */
  4. legend,
  5. legend span {float:left;}
  6. .fieldset-content {clear:both;}

My personal preference when dealing with CSS that is specifically for IE is to use Conditional Comments. You may prefer CSS hacks – the choice is yours.

I made a quick demo page so you can check the result in your browser.

Anyone happen to know of a better way of line wrapping text in legend elements?

Posted on May 18, 2009 in CSS

Comments

  1. Thanks for the overview!

    The following also appears to work:

    legend, legend span { zoom: 1; }
    

    float:left; and zoom:1; seem to trigger hasLayout; oddly giving either the legend or the span a width/height or position:static; doesn’t have an effect.

    Sticking with what you’ve got is probably best, after all zoom:1; won’t validate.

  2. Making the legend element multi-line would be much easier.

  3. Thanks for this, I’ve had this problem myself more than once.

    I think generally fieldset and legend behave kind of strange. For one I’ve never had to clear floats within a fieldset, fieldsets seem to automatically “self-clear”, also, when content (other than the legend’s content, although that too) is too wide to fit in the fieldset the fieldset will expand to fit its contents (just like IE6 treats all elements).

    Sometimes I’ve had to resort to divs and headings instead of fieldset and legend, but I’ll keep this in mind at least for the legend-problem.

  4. I ran head first into this problem myself a little while ago. Specifically, I was looking for legends to behave like display: block meant something to them (with wrapping being one of the things I needed; the other main one being margins). Wish this article had been out then. :-)

    If anyone else is in the same boat of needing more than just wrapping, I wrote up my final conclusions (complete with demos) and published it here:

    http://beckism.com/2008/12/display_block_legend/

    Or straight to the demos (article’s pretty verbose, so the example might be more useful):

    http://beckism.com/examples/display_block_legends.html

    Hope it’s useful!

  5. I have found out the hard way that there are too many problems for now to use legend, especially if you want to customize the look of legend and make it work in poor browsers. In our case we wanted the legend to look like a box with background-tone using position absolute. Only way I found to make it look good in IE 6 was to use a span inside the legend. Another problem we had was with the Nokia S60 browser, it was a more serious problem that made it impossible to login to our client site because legend was covering the inputfield, making in invisible. Ok, we could have investigated more, but the IE 6 styling problem + the css flaw in Nokia S60 made us decide not to use legend for now. We choose to go with a h2 or h3 tag instead. To sum it up:

    1. Legend has many issues, especially in older browsers.
    2. If you wan’t customize the look of legend, rembember that it is a bit more difficult to style with css, requires more hacks etc.
    3. Legend is accused for causing too much accessibility, especially if you don’t have controll of what text your clients put inside the legend.
  6. Is the legend not optional? As Marcus mentioned above, I often opt for a simple heading element (h2-h6) since styling a legend is such a pain in the rear.

    I am not completely sure, but I think it is valid to omit the legend and use a heading instead. Saves a lot of headaches.

  7. May 19, 2009 by Roger Johansson (Author comment)

    Ian: Thanks for posting that!

    Marcus, David: fieldset + legend isn’t always the right choice, but this is about the cases when it is and you want to enable line wrapping.

    Using headings instead works sometimes, but not always. See Fieldsets, Legends and Screen Readers for more details.

  8. Tsk tsk… browser sniffing indeed!

    If it’s for accessibility by visually-challenged users then there are other, more valid methods - such as outdenting the text beyond the margin.

    If the fieldset needs explanation to those with cognitive (learning) disabilities then your form is too complex; furthermore, someone with a cognitive disability might not even remember the legend by the time they’ve navigated through a few fields.

    The more logical and accessible approach is to make better use of the element.

    It seems to me that your solution is merely to appease IE users, whilst promoting what is generally viewed as bad practice.

  9. May 19, 2009 by Roger Johansson (Author comment)

    Missy:

    The more logical and accessible approach is to make better use of the element.

    Of course, but you can’t always count on having full control of everything. The fieldset may need to be displayed in a narrow column, for instance.

    It seems to me that your solution is merely to appease IE users, whilst promoting what is generally viewed as bad practice.

    I’m sorry that is how it seems to you. My intention was to suggest a cross-browser way of dealing with circumstances that may otherwise lead to legend text being too long to fit the width of its container, breaking the layout and potentially causing text to become obscured or hard to read.

    Anyway, I updated the example to emphasise that you should avoid overly long legend text.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.