Are multiple line choices possible?

Question

I am talking about your standard:

<select> <option>blah blah</option> <option>blah bl</option> </select> 

My problem is that for the dataset that I have to include in this dropdown menu, I have a few outliers:

This is the distribution graph of all occurrences (y axis) of all characters (x axis) for the lines in the drop-down list.

On average, only ~ 18.5 characters, but placing a line of 101 char forces me to use a really small font.

Is there any way to wrap text inside <option></option> ? I tried just to reset <br /> inside the middle of the line, and this was not confirmed.

Answer 1

In general, the built-in <select> and <option> controls provide very little control over how they can be styled, especially if cross-browser compatibility is a problem. If you want to better control the situation, it is best to have everything in a normal <select> (for accessibility), and then override it with a fake select box using JavaScript. I had to do this in the past, and the jQuery UI library worked well for me.

In your case, one possible user interface that could (if you go to the JavaScript replacement path) would be to use ellipsis on long elements, but then show the full text on mouseover and focus (it was early, so it might not be right events, but you get the idea).

Once you have JavaScript controlling the fake select box, there really is no end to what you can do for the user interface behavior, but ultimately, if you need control, the built-in form controls usually don't shorten it.