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.

2017-03-31T06:20:33+00:00 Categories: Development, How-To|

About the Author: