Search code examples
jqueryhtmlcssselectwidth

html select dropdrown width is too big

I searched for a fix for my problem but I can't find one, maybe I don't know how to search this in english since it's not my first language.

Anyway, my problem is that I am trying to use the feature from HTML and one of the options is very loooong and if I leave the without any width passed as style it will destroy the entire website. If I use width it will only show something from the and look as cut. However I saw an example that had "..." in it which I gladly use but I don't know how.

Just to be clear, I am looking for some help to make my look like "Long option ..." or If anyone knows a better way?

Solution

  • Sample HTML:

    <select id="myOptions">
    <option value="1"><span>Item 1</span></option>
    <option value="2">Item 2</option>
    <option value="3">Item 3 which has very very very very very long text</option>
    <option value="4">Item 4</option>
</select>

    Sample CSS:

    select{
    width: 100px;
    text-overflow: ellipsis;
}

    DEMO - Adding ... to selected value only

    Change the width to what ever fits your situation best. Applying text-overflow: ellipsis adds the ... to the text which is longer than the specified width.

    This style is only applied to the selected value but still displays the options in full when the dropdown is clicked.