How to wrap text in a drop down menu

Get Started
1

I am trying to code a drop down menu that needs to be 160px wide. However some of the drop down optionss need more than 160px to render it. I figured out if I use the white-space: pre; option and type the long options on 2 lines this solves my problem.

option{
white-space: pre;
}

However.... IE, does not support this. :( It only works in FireFox.

I really need a solution for this for IE, as our audience is (unfortunately) 85% IE users.... 

Does anyone have any idea how I can fix this?

Many thanks.

L
2

Got a link?

3

No, I dont as it’s not live yet. Let me grab the code… :slight_smile:


  
  <label for="location">Location</label>
  
  <select name="location" id="location">
  
  <option selected="selected">Select location</option>
  <option value="">----Search all locations----</option>
  <option value="">Lorem ipsum</option>
  <option value="">Lorem ipsum</option>
  <option value="">Lorem ipsum</option>
  <option value="">Lorem ipsum</option>
  <option value="">Lorem ipsum dolor sit, 
  	 Lorem ipsum dolor sit</option>
  <option value="">Lorem ipsum</option>
  <option value="">Lorem ipsum</option>
  <option value="">Lorem ipsum</option>
  <option value="">Lorem ipsum</option>
  
  </select>

The css is:

#location{
width:162px;
}
option{
white-space: pre;
}

4

I see your problem… Sorry, but I can’t seem to find a way to fix it… :frowning:

5

Thanks for looking… :slight_smile:

6