Using CSS to wrap long fieldset legends
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
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.
legend {
white-space: normal;
}
Chops (not verified) May 10, 2009
Thanks mate, works like a charm.
Anonymous (not verified) March 5, 2009
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
Anonymous December 5, 2008
Thanks, this was driving me nuts!








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