ChristopherCasper.com » Uncategorized http://christophercasper.com Who me? Mon, 06 Feb 2012 17:39:27 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 CSS word-wrap on a legend http://christophercasper.com/2011/04/css-word-wrap-on-a-legend/ http://christophercasper.com/2011/04/css-word-wrap-on-a-legend/#comments Fri, 08 Apr 2011 19:03:14 +0000 Chris http://christophercasper.com/?p=53 Continue reading →]]> 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="soemclass"><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!

]]> http://christophercasper.com/2011/04/css-word-wrap-on-a-legend/feed/ 1