在IE9和Chrome中不起作用的選擇元素上的省略號

我有一個具有指定寬度的選擇列表。文本溢出：省略號僅適用於Firefox v15。它不適用於IE7-IE9和Chrome。 IE7和IE9支持文本溢出：是否支持省略號？如果是的話，我在這裏錯過了什麼？是否有工作來獲得類似的效果？請幫忙。提前致謝。下面在IE9和Chrome中不起作用的選擇元素上的省略號

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

來源

2012-09-25 Dexter

http://css-tricks.com/forums/discussion/17240/ellipsis-not-working-in-select-menu-options/ p1 –

+1有趣。所有當前瀏覽器（v6中的IE，v7中的Firefox，Opera，Safari和Chrome所有版本都支持省略號）。但我從來沒有在選擇中嘗試省略號。 – Spudley

@Miszy在IE9中，ellipsis可以正常使用div但不能與選擇列表:( – Dexter

HTML是給出我認爲，文本溢出：省略號在Chrome支持的，當你把它變成一個選擇的元素，你可以在這裏看到的爲例：http://jsfiddle.net/t5eUe/

你可以做到這一點編程。例如，如果您使用Rails，則具有「truncate」功能，如果使用php，則具有「substr」功能。

來源

2012-09-25 06:32:25 Kedume

我在網上研究過text-overflow:ellipsis不能在IE上工作，當容器是div或width屬性沒有定義。

我們也可以在IE -ms-text-overflow:ellipsis中使用，但不推薦使用MDN。和即將到達鉻，我認爲這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);

來源

2012-09-25 06:53:25

我認爲這不是在select元素上工作有沒有辦法在select元素上實現這個[http://jsfiddle.net/F8Kdt/]（http://jsfiddle.net/F8Kdt/） –

在IE9和Chrome中不起作用的選擇元素上的省略號

回答

相關問題