溢出文本展示省略号,兼容常用浏览器

溢出文本显示省略号,兼容常用浏览器

(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);
这段js的原理很简单，就是通过不断的比较宽度值，然后逐个缩短字符宽度，当最后宽度合适的时候，停止循环，就实现了文字溢出显示…的效果。
这段js还需要一段css来配合。

.overflow {
	width:300px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
同时还需调用到jquery库，网上下载一个就可以了。

<script language="javascript" src="jquery.js"></script>
js里有个判断就是当样式里出现text-overflow或者-o-text-overflow的时候，便不会执行这段js。因为支持这两个属性的浏览器可以自己实现ellipsis效果。具体调用如：
<script>
$(document).ready( function() { 
     $("#partsid").ellipsis(true);
});
</script>
或者
<script>
$(document).ready( function() { 
      $(".overflow").ellipsis(true);
});
</script>
以上是通过className或者组建id来调用js函数。

--------------------------
---------------------------

XUL方式：

首先，我们创建XUL，它应该被保存为ellipsis.xml 
<?xml version="1.0"?>  
<bindings xmlns="http://www.mozilla.org/xbl " xmlns:xbl="http://www.mozilla.org/xbl "
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul ">      
 <binding id="ellipsis">
  <content>
   <xul:window>
    <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
   </xul:window>
  </content>
 </binding>
</bindings>
然后我们需要把这个xml文件放到一个目录，原来的css需要加一条，变成这样 

p {
	white-space: nowrap;
	width: 100%;                  /* IE6 需要定义宽度 */
	overflow: hidden;             
	-o-text-overflow: ellipsis;    /* Opera */
	text-overflow:    ellipsis;    /* IE, Safari (WebKit) */
	-moz-binding: url('ellipsis.xml#ellipsis');    /* Firefox */
}
虽然Firefox通过XUL的方式实现了ellipsis，但是还是需要注意以下这些问题：
（1）经过XUL处理过的文本你将不能被选中，按理说-moz-user-select: text; 属性将允许文本被选中，但是我没有试验成功。
（2）如果你给父元素绑定了XUL，那么子元素的内容将变得不可见。
例如：源代码为  <p>It is a long<em>haha</em> long long long long text!</p>
      结果在firefox浏览器中是看不到haha内容的。