Link to home
Start Free TrialLog in
Avatar of ITsolutionWizard
ITsolutionWizardFlag for United States of America

asked on

html5 select

i have extremely option text in the last option and I want to limit to width to 200px.
How can I do that?

<select>
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="extremely_long_value3">extremely_long_valuesdfgsdfgsdgsdgsdfgsdfgsdfgsdfgsdfgsdfsdfsdfgsdfsdfsdfsdffagsgfadsfgsdfgsdfgsdf3</option>
</select>
Avatar of Misbah
Misbah
Flag of United States of America image

here is how you limit the width to 200px by modifying the first line to be like this :
<select style="width: 200px">

Open in new window

Avatar of Anwar Saiah
Anwar Saiah

<select id="myselect">

css:
#myselect{width:200px; text-overflow: ellipsis;}
Avatar of ITsolutionWizard

ASKER

no. I want to limit the <option> not the <select>.
It is just one of the <option> is too long/width
well then instead of:
<select id="myselect">
use:
<option id="myoption">
css:
css:
#myoption{width:200px; text-overflow: ellipsis;}
not working
select boxes are usually the width of it's longest option, unless otherwise specified. So you would need to specify a width for the select box, as Misbah suggested.
I Just tested it on jsfiddle and it works.
What browser do you use?
ASKER CERTIFIED SOLUTION
Avatar of Anwar Saiah
Anwar Saiah

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial