Ellipsis for overflow text in dropdown boxes

78

I'm fixing the width of one of my dropdown boxes (yes I know there are cross-browser issues with doing this).

Is there a non-js way to cut off overflowing text and append ellipses? text-overflow:ellipsis doesn't work for <select> elements (at least in Chrome).

_x000D_
_x000D_
select, div {_x000D_
    width:100px; _x000D_
    overflow:hidden; _x000D_
    white-space:nowrap; _x000D_
    text-overflow:ellipsis;_x000D_
}
_x000D_
<!--works for a div-->_x000D_
<div>_x000D_
    A long option that gets cut off_x000D_
</div>_x000D_
_x000D_
<!--but not for a select-->_x000D_
<select>_x000D_
    <option>One - A long option that gets cut off</option>_x000D_
    <option>Two - A long option that gets cut off</option>_x000D_
</select>
_x000D_
_x000D_
_x000D_

Example here: http://jsfiddle.net/t5eUe/

This question is tagged with html css

~ Asked on 2011-09-02 22:21:54

The Best Answer is


39

NOTE: As of July 2020, text-overflow: ellipsis works for <select> on Chrome

HTML is limited in what it specifies for form controls. That leaves room for operating system and browser makers to do what they think is appropriate on that platform (like the iPhone’s modal select which, when open, looks totally different from the traditional pop-up menu).

If it bugs you, you can use a customizable replacement, like Chosen, which looks distinct from the native select.

Or, file a bug against a major operating system or browser. For all we know, the way text is cut off in selects might be the result of a years-old oversight that everyone copied, and it might be time for a change.

~ Answered on 2011-09-05 23:02:24


41

If you are finding this question because you have a custom arrow on your select box and the text is going over your arrow, I found a solution that works in some browsers. Just add some padding, to the select, on the right side.

Before:

enter image description here

After:

enter image description here

CSS:

select {
    padding:0 30px 0 10px !important;
    -webkit-padding-end: 30px !important;
    -webkit-padding-start: 10px !important;
}

iOS ignores the padding properties but uses the -webkit- properties instead.

http://jsfiddle.net/T7ST2/4/

~ Answered on 2014-07-25 21:24:38


Most Viewed Questions: