由于文字内容的长度不确定性和页面布局的固定性，难免会出现文字内容超过div（或其他标签，下同）区域的情况，此时比较好的做法就是当 文字超过限定的div宽度后自动以省略号（…）显示，这样，按照习惯，人们都会知道这儿有文字被省略了。css中有个属性叫做text- overflow:ellipsis;配合其他一些属性可以实现IE,chrome,safria浏览器下文字溢出点点点省略号显示，在加上opera浏 览器的私有属性-o-text-overflow:ellipsis;就目前而言，可以实现Firefox浏览器以外的所有主流浏览器的文字溢出点点点省 略号显示。
而本文将提供多种兼容性上佳的文字溢出点点点省略号显示的方法，而里面不少方法就是自己想出来的。有使用外部辅助文件的，有纯粹的css方法的，还 有使用jQuery方法的。每种方法都提供各个浏览器下的截图验证，提供实例页面，提供部分源文件，都是值得信赖的方法，希望对您有所帮助。文章中穿插了 些牢骚，您可以跳过，与本文主体不是很相关。
1、常规css方法——使Firefox以外主流浏览器文字溢出省略号表示下图为此常用方法在各个浏览器下的表现：
IE6浏览器下
IE7浏览器下
chrome谷歌浏览器下
Safari浏览器下
opera浏览器下
Firefox火狐浏览器下
Firefox火狐浏览器下
可以清除地看到溢出的文字部分用点点点省略号表示了。再结合上面的css样式，就可以实现所有主流浏览器下的单行文字溢出用省略号表示了。css表示如下：
3、我对网上些文章和网站的不满昨天编写demo实例页面，想找之前看过的一个同仁提过的图片显示省略号的方法，结果发现很多打着称号兼容“IE，FF”的文章，不错啊，于是我看看是什么方法。结果一肚子的火。
图中显示的是Google搜索后的前五项，其中有四个是所谓的建站教程网站，这四个又是同一篇文章。这篇文章很不负责，居然是我很久之前就想过且测过，由于兼容性等等问题而不采用的方法。用:after伪类和content在文字后面加省略号。这个方法可以说是完全行不通。首先，标题就是个大大的错误，什么兼容“IE，FF”？第一、chrome不算浏览器吗？看这文章时间，chrome已经出来了，Safari，opera不算浏览器吗？就只要兼容IE，FF就可以了吗？第二、你兼容IE，FF吗？什么叫兼容，就是要表现一样。两个浏览器下表现一致吗？差远了！第三、你兼容IE吗？IE6和IE7下都天差地别的，还说什么兼容呢！看这文章的意思，这世界上就只有两种浏览器，IE6和Firefox，我不知道作者是个很大的草包还是上世纪时空转移过来的程序员，用句赤壁里的话说就是“你过时了！”
其次，方法缺陷很多：1、说是兼容，其实反而大大破坏了兼容性，IE6和IE7下的表现就不一样，一句IE“不支持max-width”就让我想给作者扇个耳光，IE7不支持吗，别告诉我你写这文章时还没有IE7浏览器。2、本来chrome浏览器，Safari还有opera可以实现文字溢出省略号显示的，现在受限与:after和content，就会一处理不当，文字直接被截，就很丑了。3、多套用了一层标签，css也多了好几行，没有必要，资源消耗高。4、当文字很短时后面也还跟着个省略号，没有溢出为什么还要显示省略号呢？
无论是兼容性，资源占用，逻辑表现都是很屎的，是个完全不能用的方法。
我不是愤慨作者技术不行，而是不满没有一点道义和科研素养。睁着眼睛说瞎话，都是没有经过验证的东西，凭感觉大放厥词。我更鄙视那些所谓的教程网站，这些网站什么教程都拿来的，它只管点击率，不管是否正确实用，n年前淘汰的东西它也拿来，误人子弟啊！我就很纳闷，这些网站无论设计，还是布局，或是页面的兼容性都差的跟坨酝酿很久的猪屎一样，还教别人怎么做网站。我是看穿了，其实这篇文章不行他们是知道的，可以没有办法啊，“兼容IE，FF”，多诱人的关键词啊！不管怎样，得拿篇文章来占住这几个关键词啊！流量给了别人可不行啊！这些唯利是图的网站，将一篇完全不行的文章传来传去，就为了点破点击率。这跟三鹿有什么区别，做教程的，是教人的，随便拿一些错误的东西糊弄人，害了多少人啊，真是太没有道义了！
4、我自己想出来的方法——margin负值定位法这里先上代码，HTML部分：
css部分：
结果在不同浏览器下的表现如下（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限制字符个数实现溢出省略号表示
css部分需要给定一个宽度值，例如：.zxx_text_overflow{width:400px;}
结果如下：
jQuery宽度判定实现溢出省略号表示
最后补充：我抽了一会儿时间把上面两个jQuery的方法结合起来，写了个小小的jQuery插件，方便对jQuery感兴趣的人直接使用了。这个单行文字溢出用点点点省略号显示的jQuery插件的使用很简单。例如：$(“.test1″).wordLimit(); 自动获取css宽度进行处理，如果css中未对.test1给定宽度，则不起作用$(“.test2″).wordLimit(24); 截取字符数，值为大于0的整数，这里表示class为test2的标签内字符数最多24个
$.wordLimit();里面为空则根据宽度自动截取，有值的话就按照字符数进行截取了。
结语：css，js等前端技术博大精深，肯定还有其他更好的解决方法，这里只是把我所知道的写下来，希望对其他人有所帮助。技术的进步是永不停息的，或许一两年后，我的这个文章里所提到的些方法会成为过时的东西的。希望如此！