CODEWITHSUNDEEP
htmlcsscross-browser
No Results Found
No Results Found

Reputation: 102854

How can I make <legend> text wrap?

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

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?

Upvotes: 14

Views: 13250

Answers (5)

G. Egli
G. Egli

Reputation: 213

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%;
}

Upvotes: 2

TMMC
TMMC

Reputation: 301

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 */
}

Upvotes: 8

Galeel
Galeel

Reputation: 226

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

Upvotes: 21

sandeep
sandeep

Reputation: 92843

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/

Upvotes: 5

Phil.Wheeler
Phil.Wheeler

Reputation: 16858

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.

Upvotes: 3

Related Questions