How can I make text wrap?

Question

Usually

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

Answer 1

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

Answer 2

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/

Answer 3

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.

Answer 4

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

Answer 5

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