How can I make <legend> text wrap?

html css cross-browser

12,354

Solution 1

Adding white-space: normal; to the legend works fine except in IE7 and IE6. Please see this jsfiddle demo

After playing around a bit with the CSS, I got it work on IE7, IE8, IE9, FF3-4, and Chrome11 by adding a <span> inside the <legend> with the below CSS:

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

Please have a look at this jsfiddle

Solution 2

It's been a while since the question was posted, but now IE10 is here for some time and still sux while beeing so 'modern'. additionally one has no ability to use conditional comment. Here's what does the trick:

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

Solution 3

Add white-space:normal to your legend to force the text to wrap.

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

For more read this article: http://beckism.com/2008/12/display_block_legend/

Solution 4

Try this simpler approach:

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

That should sort your legend out. Your next problem becomes the background color of your fieldset, but that's easily solved by wrapping the whole thing in a div and styling that.

Solution 5

In case somebody needs a fix that works for Microsoft Internet Explorer 11 and Edge while not interfering with Chrome/Firefox/Safari:

legend {
  display: table;
  max-width: 100%;
}

View more solutions

12,354

Author by

Wesley Murch

Thanks for your interest.

Updated on June 03, 2022

Comments

Wesley Murch about 2 years
Usually <legend> text is pretty short so I had no idea this was a problem until I ran into it yesterday. I was trying and failing to set a 50% width on a <fieldset>, but it wouldn't work due to long legend text. Either the fieldset won't be smaller than the legend, or the legend's width exceeds that of the fieldset.

This doesn't seem to be an issue in IE8, Chrome, Safari, Opera, and maybe others. It is an issue in Firefox, IE6, and IE7.

Goal: Get text to wrap in a <legend> cross-browser
- Without setting any fixed widths
- Hopefully without extra markup
- Without javascript
- Any way we can if the above are impossible
- Without giving up and using a different tag
I've seen this post: Getting LEGEND tags to wrap text properly

...But there is only a single answer that uses a <div> with a fixed width inside the legend tag, I can't actually get it to work (see fiddle), and OP closed with the comment "in the end we gave up". Googling this subject turns up a whole lot of "not much" as well.

I put up a jsfiddle demo with some CSS I've tried. As I said, I've never run into this before so I'm baffled that this is so difficult, and I can't seem to get anything to work. Is it really just impossible?
Wesley Murch about 13 years

Yep, this works great - although I didn't see any problem with the background-color of the fieldset on FF3 or FF4, what are you referring to?
Wesley Murch about 13 years

This is perfect, I can't believe it's so simple! Thanks for the entertaining and helpful article. It seems to refer to FF2 and FF3, so it's curious to see that the issue persists on FF4. I'm also able to control the legend much more after setting this property. What a strange tag.
Phil.Wheeler about 13 years

Meh - must've been a quirk through JSFiddle. The grey wasn't backing the whole legend text region.
Wesley Murch about 13 years

Ah you mean on the top? I think that's basically normal legend behavior, kind of like vertical-align:middle. Adding float:left to the legend seemed to resolve that but it is a bit weird.
sandeep about 13 years

@ wesley; happy to help if that's you want then accept the answer which helpful to you.
Wesley Murch about 13 years

Aha, thanks for pointing that out. It appears that using the <div> within the legend fixes this for IE7 and IE6. Updated fiddle without the extra CSS
Wesley Murch about 13 years

Saw your update: Nice work! Looks like we need the extra div/span element for those awful browsers. It's doubtful I'll be truly needing this any time soon for IE<8 - but now I know what I have to do to fix it when it does come up. Thanks again!
Julesfrog almost 10 years

Thank you for this great solution. IE10 was also an issue. The span trick was necessary to fix the wrapping.