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?
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.
No, you'll have to build custom drop down list for such a thing.
jQuery offers lots of these; you can probably use CSS to define height for specific options to achieve what you need.