resize the text in drop down

Question

I have drop down in which few text is long and due to this size has become too long.

 var name1 = "A", name2 = "B", name3 = "C"; var s = document.getElementById('names'); s.children[0].innerText = name1; s.children[1].innerText = name2; s.children[2].innerText = name3;

 <select id="names"> <option value="a">fill1</option> <option value="b">fill2</option> <option value="c">fill3</option> </select>

How can I resize the drop-down?

Answer 1

If you set a class with css to give it a specified width. Or just put some style on your select element.

<select id="names" style=width:100px class='setMyWidth'>
<option value="a">fill1</option>
<option value="b">fill2</option>
<option value="c">fill3</option>

you can also create a css class.

.setMyWidth{width: 100px;}

note: without any external library it is not possible to word wrap your dropdown box. Shown in this fiddle is what you are trying to achieve. That is only possible with the external library found over here