The span element and CSS properties can be used to support the line wrapping of legend element content.
The first example is the standard rendering of long legend content. The second example demonstrates how to implement line wrapping using the span element.
Example Start
Example End
HTML Source Code
<fieldset class="radiogroup">
<legend>Tracy caught 9 fish in the morning. She threw 5 of them back because they were too small. She caught 8 more in the afternoon. How many fish did Tracy have then?</legend>
<ul class="radio">
<li><input type="radio" name="a" id="a1" value="1" onfocus="radioFocus(event)" onblur="radioBlur(event)"/><label for="a1">8</label></li>
<li><input type="radio" name="a" id="a2" value="2" onfocus="radioFocus(event)" onblur="radioBlur(event)"/><label for="a2">12</label></li>
<li><input type="radio" name="a" id="a3" value="3" onfocus="radioFocus(event)" onblur="radioBlur(event)"/><label for="a3">17</label></li>
<li><input type="radio" name="a" id="a4" value="4" onfocus="radioFocus(event)" onblur="radioBlur(event)"/><label for="a4">22</label></li>
</ul>
</fieldset>
<fieldset class="radiogroup">
<legend><span class="wrap">Trevor counted 77 coins in his bank. He counted 29 quarters. The rest are dimes. How many more dimes than quarters does Trevor have?</span></legend>
<ul class="radio">
<li><input type="radio" name="b" id="b1" value="1" onfocus="radioFocus(event)" onblur="radioBlur(event)"/><label for="b1">17</label></li>
<li><input type="radio" name="b" id="b2" value="2" onfocus="radioFocus(event)" onblur="radioBlur(event)"/><label for="b2">29</label></li>
<li><input type="radio" name="b" id="b3" value="3" onfocus="radioFocus(event)" onblur="radioBlur(event)"/><label for="b3">19</label></li>
<li><input type="radio" name="b" id="b4" value="4" onfocus="radioFocus(event)" onblur="radioBlur(event)"/><label for="b4">48</label></li>
</ul>
</fieldset>
Javascript Source Code
<script type="text/javascript">
//
// Add focus styling to the parent (LI) element of the radio button receiving focus
//
function radioFocus( event ) {
// Get event object if using Internet Explorer
var e = event || window.event;
// Check the object for W3C DOM event object, if not use IE event object to update the class of the parent element
if( e.target )
e.target.parentNode.className = "focus";
else
e.srcElement.parentNode.className = "focus";
}
//
// Remove focus styling from the parent (LI) element of the radio button receiving focus
//
function radioBlur( event ) {
// Get event object if using Internet Explorer
var e = event || window.event;
var node;
// Check the object for W3C DOM event object, if not use IE event object to update the class of the parent element
if( e.target )
e.target.parentNode.className = "";
else
e.srcElement.parentNode.className = "";