Ellipsis on select element not working in IE9 and Chrome

Question

I have a select list with a specified width. text-overflow: ellipsis is working only with Firefox v15. It is not working with IE7-IE9 and Chrome. Is text-overflow : ellipsis supported in IE7- IE 9 and chrome? If yes, what am i missing here? Is there a work around to get a similar effect? Please help. Thanks in advance. Html is given below

    <!DOCTYPE html>
<html>
<body>

<select style="white-space: nowrap;overflow: hidden;
text-overflow: ellipsis;width:70px;
">
  <option>Volvooooooooooooo</option>
  <option>Saabbbbbbbbbbbb</option>
  <option>Mercedesaaaaaaaaaa</option>
  <option>Audiiiiiiiiiiiiiii</option>
</select>

</body>
</html>

http://css-tricks.com/forums/discussion/17240/ellipsis-not-working-in-select-menu-options/p1 — Michał Miszczyszyn, Sep 25 '12 at 06:39
+1 interesting. Ellipsis in general is supported in all current browsers (IE from v6, Firefox from v7, Opera, Safari and Chrome all versions that I know of). But I've never tried ellipsis in a select. — Spudley, Sep 25 '12 at 06:51
@Miszy In IE9 ellipsis works fine with the div but not with the select list :( — Dexter, Sep 25 '12 at 11:39
Have you opened the link I posted? That's exactly what it says. It doesn't work for select options. — Michał Miszczyszyn, Sep 25 '12 at 11:56

score 2 · Answer 1 · answered Sep 25 '12 at 06:32

I think that text-overflow:ellipsis is not supported in Chrome when you put it into a select element, you can see an exemple here: http://jsfiddle.net/t5eUe/

You can do this programming. For example, if you use Rails, you have the function "truncate", if you use php, you have the function "substr".

score 0 · Answer 2 · edited May 23 '17 at 12:04

I studied on net that text-overflow:ellipsis does not work on IE, when the container is a div or width attribute is not defined.

We can also use in IE -ms-text-overflow:ellipsis but is not recommended by MDN. and coming to chrome, I think this link will solve your problem.

check this browser compatibility for text-overflow.

If these all doesnt work then go through jQuery to achieve this which works on all browsers.

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
}

.ellipsis.multiline {
    white-space: normal;
}

<div class="ellipsis" style="width: 100px; border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="ellipsis multiline" style="width: 100px; height: 40px; border: 1px solid black; margin-bottom: 100px">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

<script type="text/javascript" src="/js/jquery.ellipsis.js"></script>
<script type="text/javascript">
$(".ellipsis").ellipsis();
</script>

jquery.ellipsis.js

(function($) {
    $.fn.ellipsis = function()
    {
            return this.each(function()
            {
                    var el = $(this);

                    if(el.css("overflow") == "hidden")
                    {
                            var text = el.html();
                            var multiline = el.hasClass('multiline');
                            var t = $(this.cloneNode(true))
                                    .hide()
                                    .css('position', 'absolute')
                                    .css('overflow', 'visible')
                                    .width(multiline ? el.width() : 'auto')
                                    .height(multiline ? 'auto' : el.height())
                                    ;

                            el.after(t);

                            function height() { return t.height() > el.height(); };
                            function width() { return t.width() > el.width(); };

                            var func = multiline ? height : width;

                            while (text.length > 0 && func())
                            {
                                    text = text.substr(0, text.length - 1);
                                    t.html(text + "...");
                            }

                            el.html(t.html());
                            t.remove();
                    }
            });
    };
})(jQuery);

I think that this is not working on select element. Is there a way to achieve this on select element.[http://jsfiddle.net/F8Kdt/](http://jsfiddle.net/F8Kdt/) — Vivek Dragon, Feb 06 '14 at 09:52

Ellipsis on select element not working in IE9 and Chrome

2 Answers2

Linked