3

I have a problem with width of options of select tag. I want long text to not cause options to go outside border of select tag. This behaviour can be viewed in this fiddle: http://jsfiddle.net/zono/KTu7x/5/ This just one simple select tag: 

<select id="myselect">
<option>short string</option>
<option>long string long string long string</option>    
<option>short string</option>
<option>short string</option>
<option>short string</option>
</select>

I don't want options to go outside black border (attached image). enter image description here

I would appreciate any help.

Best regards.

Georgi Naumov
  • 4,160
  • 4
  • 40
  • 62
  • What do you want it to do? An ellipsis? eg: "long string long ..." – RichieAHB Jan 23 '14 at 14:28
  • Text to go on second line or if it is not possible to not be visible. word-break: break-all; overflow: hidden; on option selector don't help at all. – Georgi Naumov Jan 23 '14 at 14:30
  • Well, with pure css, I think, you'll not be able to change that behaviour. What you could do is rebuild a select with ul and li (http://stackoverflow.com/questions/8430279/how-to-style-the-option-with-only-css#8431078) – bouscher Jan 23 '14 at 14:51
  • Possible duplicate of [Set width of dropdown element in HTML select dropdown options](https://stackoverflow.com/questions/1702186/set-width-of-dropdown-element-in-html-select-dropdown-options) – StardustGogeta Jun 21 '17 at 21:12

1 Answers1

1
$("#testselectset").selectBoxIt({
            theme: "default",
            defaultText: "Make a selection...",
            autoWidth: false
        });

You won't be able to retain the size of the select box but if you use the Selectboxit plugin you have achieve this. It makes the option tag wrap after the text gets to a certain point. Look here for an example. I hope this helps!

Dwayne Brissett
  • 80
  • 1
  • 6