Using CSS to wrap long fieldset legends

Trevor Twining

on

September 16, 2008

Using CSS to wrap long fieldset legends

In a recent project I encountered a very long legend in a fieldset from a node add/edit form. Instead of wrapping, it forced its way into the right-hand sidebar and was generally causing a mess of the layout. In looking into this I discovered that legends don't wrap by default, and so I needed to toggle that behavior via CSS. You can do it globally using the following CSS
legend {
  white-space: normal;
}
Because it's a global setting, if your legend ever gets too long, then this declaration causes it to wrap. If you wanted to target a specific instance, than just change the declaration to suit your needs.

Share it!

Saved me from pulling more hair out!! Great tip - thanks

Thanks mate, works like a charm.
Thanks, this is really helpful and so simple. I think if I hadn't seen this post I would have spent ages trying to get it to wrap using all sorts of hacks! Charlotte
Thanks, this was driving me nuts!