Can you have multiple lines in an <option> element?

Question

Is there a way to have multiple lines in an <option> element?

Like this:

 -------------------------
| Normal <option> element |
 -------------------------
| <option> element broken |
| onto two lines          |
 -------------------------
| Normal <option> element |
 -------------------------

Is there any HTML/CSS approach, or should I use JavaScript?

Answer 1

This may not be what you want, but you can get two lines per option, by using the "optgroup" tag e.g:

<select>
  <optgroup label="Click below for 'yes'">
    <option value="yes">Yes</option>
  </optgroup>
  <optgroup label="Click below for 'No'">
    <option value="no">No</option>
  </optgroup>
</select>

Answer 2

It's a particular case of displaying HTML tags inside an <option></option> element. As far as I know, browsers behave very differently in this area (Firefox displays even images, other browsers ignore most or all tags) and there isn't a cross-browser solution. You'll probably need to emulate it with JavaScript and a different markup.

At http://www.w3.org/TR/2011/WD-html-markup-20110113/option.html they say:

Permitted contents: normal character data

... which is defined at http://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#normal-character-data

The spec is hard to understand, as usual, but I understand that you cannot insert a literal < (i.e., an HTML tag such as <br>). I cannot find where it defines the behaviour with blank space but most browsers appear to collapse it.