Home/ Questions/Q 6580803
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T16:04:23+00:00

I’m talking about your standard: <select> <option>blah blah</option> <option>blah bl</option> </select> my problem is,

  • 0

I’m talking about your standard:

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

my problem is, for the dataset I must include in this dropdown, I’ve got a few outliers:

enter image description here

That’s a distribution graph of the total occurrences (y-axis) of all character counts (x-axis) for the strings in the dropdown.

The average is only ~18.5 characters, but accommodating the 101 char string forces me to use a really small font.

Is there a way to wrap text inside a <option></option> ? I tried just dropping a <br /> inside the middle of the string and that didn’t validate.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    In your case, one possible UI that might would (if you go the JavaScript replace route) would be to use an ellipsis on the long elements, but then show their full text on mouseover and focus (it’s early, so these might not be the correct events, but you get the idea).

    Once you have JavaScript controlling a fake select box, there’s really no end to what you can do for the UI behavior, but ultimately, if you need control, native form controls usually don’t cut it.

    • 0