关于文字内容溢出用点点点(…)省略号表示

1、常规css方法——使Firefox以外主流浏览器文字溢出省略号表示
下图为此常用方法在各个浏览器下的表现：



IE6浏览器下



IE7浏览器下



chrome谷歌浏览器下



Safari浏览器下



opera浏览器下



Firefox火狐浏览器下

可以看到，仅在Firefox火狐浏览器下无法实现文字溢出省略号表示，其文字直接从中间咔掉了。综合考虑代码成本，表现效果，我个人觉得这样子已经算是不错的了，追求完美和实际效益之间要追求一定的平衡。如果页面上很多文字都溢出，则需要寻求更兼容的方法，要是偶尔会出现文字溢出的情况，就是用这类css代码就足够了，单层标签，简单实用：

.zxx_text_overflow{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}

2、使用ellipsis.xml文件使Firefox支持文字溢出后点点点省略号表示
这是老外提供的一种方法，使用Firefox的私有属性调用一个XML文件，可以使Firefox火狐浏览器下文字溢出后以省略号的形式显示。
右键另存为下载：ellipsis.xml
调用方法如下：-moz-binding:url(‘ellipsis.xml#ellipsis’);跟css样式写法一致。
需要注意的是：此XML文件不支持向上路径的访问，也不支持绝对路径的访问。也就是说此XML文件需要放在调用文件（css文件，或HTML文件）的同目录下或下一级目录下，不能向上访问。原因我是不清楚的，我反复试验，都证明如此。
下图为使用此XML文件后Firefox浏览器下的表现：



Firefox火狐浏览器下

可以清除地看到溢出的文字部分用点点点省略号表示了。再结合上面的css样式，就可以实现所有主流浏览器下的单行文字溢出用省略号表示了。css表示如下：

.zxx_text_overflow{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url('ellipsis.xml#ellipsis'); overflow:hidden;}

例如在实例页面中，此段css是写在页面上的，所以ellipsis.xml文件是放在HTML文件同目录下的。

4、我自己想出来的方法——margin负值定位法
这里先上代码，HTML部分：

<div class="zxx_text_overflow" >
<div class="zxx_con" >这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。</div>
<div class="zxx_dotted" >…</div>
</div>

css部分：

.zxx_text_overflow{width:24em; height:1.3em; overflow:hidden; zoom:1;}
.zxx_text_overflow .text_con{float:left; height:1.3em; margin-right:3em; overflow:hidden;}
.zxx_text_overflow .text_dotted{width:3em; height:1.31em; float:right; margin-top:-1.3em;}

结果在不同浏览器下的表现如下（IE6，IE7以IE6示例，Firefox和chrome以Firefox示例）：



IE6下，IE7同类型，表现一致



Firefox浏览器下表现



opera浏览器下表现



Safari浏览器下表现

简要说明：此方法兼容IE6，IE7（IE8未测过），Firefox，chrome，Safari，opera浏览器。没有hack，没有生僻的css样式。文字短时，没有省略号，文字溢出时就出现省略号。可以说是相当不错的一个方法。原理也很简单：当文字内容足够长时就把隐藏在上面的省略号层给挤下来了。关键就是点点点所在div层的高度的绝对值要比其margin的绝对值大那么一点点。 如果您不习惯用em做单位，直接换作px就可以了，效果是一样的。

5、jQuery限制字符字数的方法
代码很简单，使用也很方便，如下：

$(document).ready(function(){
//限制字符个数
$(“.zxx_text_overflow”).each(function(){
var maxwidth=23;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+’…’);
}
});
});

所产生的结果是：页面中class为“zxx_text_overflow”的标签内部字符的个数将最多显示23个，如果原本字符个数大于23，则会在后面添加点点点省略号（…），如下图所示的：



jQuery限制字符个数实现溢出省略号表示

6、jQuery自动判断宽度是否超出的方法
相比较前面一种方法，这个js实现的方法更加智能些（也更占用资源），通过复制节点（就是需要判断是否文字溢出省略号显示的标签层），获取其宽度，再判断其宽度是否大于样式中给定的宽度限值，大于则去掉尾部字符，添加省略号，循环，直到复制的层的宽度小于css给定值。
js代码如下：

var wordLimit=function(){
$(“.zxx_text_overflow”).each(function(){
var copyThis = $(this.cloneNode(true)).hide().css({
‘position’: ‘absolute’,
‘width’: ‘auto’,
‘overflow’: ‘visible’
});
$(this).after(copyThis);
if(copyThis.width()>$(this).width()){
$(this).text($(this).text().substring(0,$(this).html().length-4));
$(this).html($(this).html()+’…’);
copyThis.remove();
wordLimit();
}else{
copyThis.remove(); //清除复制
return;
}
});
}
wordLimit();

css部分需要给定一个宽度值，例如：.zxx_text_overflow{width:400px;}

结果如下：



jQuery宽度判定实现溢出省略号表示

狠狠地点击这里：本文各类方法的demo实例页面

最后补充：
我抽了一会儿时间把上面两个jQuery的方法结合起来，写了个小小的jQuery插件，方便对jQuery感兴趣的人直接使用了。
这个单行文字溢出用点点点省略号显示的jQuery插件的使用很简单。例如：

$(“.test1″).wordLimit(); 自动获取css宽度进行处理，如果css中未对.test1给定宽度，则不起作用
$(“.test2″).wordLimit(24); 截取字符数，值为大于0的整数，这里表示class为test2的标签内字符数最多24个

$.wordLimit();里面为空则根据宽度自动截取，有值的话就按照字符数进行截取了。