选择元素上的省略号在 IE9 和 Chrome 中不起作用答案

【问题标题】：Ellipsis on select element not working in IE9 and Chrome选择元素上的省略号在 IE9 和 Chrome 中不起作用
【发布时间】：2012-09-25 05:51:52
【问题描述】：

我有一个指定宽度的选择列表。文本溢出：省略号仅适用于 Firefox v15。它不适用于 IE7-IE9 和 Chrome。 IE7-IE 9 和 chrome 是否支持文本溢出：省略号？如果是的话，我在这里错过了什么？有没有办法获得类似的效果？请帮忙。提前致谢。下面给出了html

    <!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>

【问题讨论】：

css-tricks.com/forums/discussion/17240/…
+1 有趣。目前所有的浏览器（IE v6、Firefox v7、Opera、Safari 和 Chrome 所有我知道的版本）都支持省略号。但我从未在选择中尝试过省略号。
@Miszy 在 IE9 中，省略号在 div 中效果很好，但在选择列表中效果不佳:(
你打开我发布的链接了吗？这正是它所说的。它不适用于选择选项。

标签： html css

【解决方案1】：

我认为当您将 text-overflow:ellipsis 放入选择元素时，Chrome 不支持它，您可以在此处查看示例：http://jsfiddle.net/t5eUe/

您可以进行此编程。例如，如果你使用 Rails，你有函数“truncate”，如果你使用 php，你有函数“substr”。

【讨论】：

【解决方案2】：

我在网上研究了text-overflow:ellipsis在IE上不起作用，当容器是div或width属性未定义时。

我们也可以在IE中使用-ms-text-overflow:ellipsis，但MDN不推荐使用。并来到 chrome，我认为 link 将解决您的问题。

检查这个browser compatibility for text-overflow。

如果这些都不起作用，那么通过jQuery 来实现这一点，它适用于所有浏览器。

.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);

【讨论】：

我认为这不适用于选择元素。有没有办法在选择元素上实现这一点。http://jsfiddle.net/F8Kdt/