HTML will open (select) using Wrap and Border after each value (option)

Question

I am trying to achieve two things with DropDown.

• First, I want to wrap the text in a list of options in a drop-down list.
• Secondly, I want to put a border after each option

and I want to support IE (and other browsers too).

This is because I will have long text in the drop-down list and I don’t want to cut them. For this reason, I want to do the above things.

Something like that: -

http://jsfiddle.net/fnagel/GXtpC/embedded/result/

select the option "Same with formatting formatting options, select Address". Notice how the parameters are formatted and have a border-bottom with each of them.

Here is what I tried (Text): -

<select name="d" class="myselect"> <option value="sdf" class="test1"> line text How to wrap the big line text </option> <option value="sdf2" class="test1"> line text How to wrap the big line text </option> <option value="sdf3" class="test1"> line text How to wrap the big line text </option> <option value="sdf4" class="test1"> line text How to wrap the big line text </option> </select> 

CSS

 .myselect { width: 150px; overflow: hidden; text-overflow: ellipsis; } .myselect option { white-space: nowrap; width: 100% border-bottom: 1px #ccc solid; /* This doesn't work. */ } 

Answer 1

 select { width:100px; overflow:hidden; white-space:pre; text-overflow:ellipsis; -webkit-appearance: none; } option { border: solid 1px #DDDDDD; } 

Answer 2

The currently accepted answer only truncates the text with an ellipsis and adds a border that does not completely solve the problem.

I feel this is a more complete, more cross-browser compatible answer: Do the text in the element's wrap element get too long?

In short, you can either do it right using javascript, or do it in a simple ... incompatible way using the css white-space: pre-wrap property for your option elements.

Note: if you use white-space: pre-wrap , be sure to add the browser prefixes -moz- and -o- .

---

Here is what I came up with as a quick, simple CSS solution (although the jQuery I talked about is more reliable and better):

 select { width: 200px; max-width: 100%; /* So it doesn't overflow from it parent */ } option { /* wrap text in compatible browsers */ -moz-white-space:pre-wrap; -o-white-space:pre-wrap; white-space:pre-wrap; /* hide text that can't wrap with an ellipsis */ overflow: hidden; text-overflow:ellipsis; /* add border after every option */ border-bottom: 1px solid #DDD; }