ChristopherCasper.com

CSS word-wrap on a legend

Legend elements are extremely tricky to get styled right across browsers. I’ve come across the issue on several occasions where I need the text inside the legend to wrap lines when it’s too long. Here is an example:

<fieldset>
  <legend class="someclass">Some text that needs to wrap because its too long.</legend>
</fieldset></code>

All we need to do now is just wrap the text inside the legend within a span tag like so:

<fieldset>
  <legend class="someclass"><span>Some text that needs to wrap because its too long.</span></legend>
</fieldset>

Add some css to target the span:

legend.someclass span {
  word-wrap: normal;
  white-space: normal;
}

That’s it!

This entry was posted in Photography, Web and tagged CSS, html by Chris. Bookmark the permalink.