聘我网

新概念招聘3.0

如何实现跨浏览器的text-overflow: ellipsis ?

vote up0vote downstar
text-overflow: ellipsis;

firefox不支持这个属性,是否有办法模拟出来?

 

1 个答复

vote up0vote downcheck

使用这个jQuery插件(需要配合相应的css,见以下例子):

(function($) {
  $.fn.ellipsis = function(enableUpdating){
    var s = document.documentElement.style;
    if (!('textOverflow' in s || 'OTextOverflow' in s)) {
      return this.each(function(){
        var el = $(this);
        if(el.css("overflow") == "hidden"){
          var originalText = el.html();
          var w = el.width();

          var t = $(this.cloneNode(true)).hide().css({
                        'position': 'absolute',
                        'width': 'auto',
                        'overflow': 'visible',
                        'max-width': 'inherit'
                    });
          el.after(t);

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

          t.remove();

          if(enableUpdating == true){
            var oldW = el.width();
            setInterval(function(){
              if(el.width() != oldW){
                oldW = el.width();
                el.html(originalText);
                el.ellipsis();
              }
            }, 200);
          }
        }
      });
    } else return this;
  };
})(jQuery);

例:

<p id="hello" style="text-overflow:ellipsis;-o-text-overflow:ellipsis;-ms-text-overflow:ellipsis;width: 150px;white-space: nowrap;overflow:hidden;">Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World </p>

<script>
$('#hello').ellipsis();
</script>
链接

您的回答





不是您要找的问题? 浏览其他含有标签 的问题或者 自己问个.