Js与css实现文本溢出自动添加省略号方法总结

时间：2013-10-30 编辑：简简单单来源：一聚教程网

1.常规css方法——可以实现IE，Safari，chrome，opera浏览器下文字溢出省略号表示
这是一段测试文字，主要是用来测试文字溢出后是否会用省略号显示。

代码如下	复制代码
.zxx_text_overflow_1{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}

2.使用ellipsis.xml文件使Firefox支持文字溢出后点点点省略号表示
这段代码调用了跨文件夹路径的ellipsis.xml文件，看Firefox浏览器下是够文字溢出省略号表示。
ps: 在Firefox下上面div内容显示空白，此div内容是：“这段代码添加了跨文件夹路径的ellipsis.xml文件，看Firefox浏览器下是够文字溢出省略号表示”。

代码如下	复制代码
.zxx_text_overflow_2{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url('../xml/ellipsis.xml#ellipsis'); overflow:hidden;}

这段代码调用了同文件夹路径的ellipsis.xml文件，看Firefox浏览器下是够文字溢出省略号表示。
ps: 在Firefox下上面div文字溢出省略号显示，此div内容是“这段代码调用了同文件夹路径的ellipsis.xml文件，看Firefox浏览器下是够文字溢出省略号表示”。至此，几乎所有主流浏览器都实现文字溢出省略号表示。

代码如下	复制代码
.zxx_text_overflow_3{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url('ellipsis.xml#ellipsis'); overflow:hidden;}

这里有个小结论：这个使Firefox浏览器下文字溢出省略号表示的ellipsis.xml文件要在页面的同一目录下，或是下一级目录下（我已测试），要是向上跨文件夹访问或绝对路径访问则失效。原因不详！

js实现代码

代码如下

复制代码

Js文本溢出自动添加省略号ellipsis-兼容版

你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

css文本溢出自动添加省略号

1.兼容 IE6 / IE7 /FireFox
2.文本对象:table里的文本，不能换行
3.如果采用js截取，支持resize,并保证页面执行效率
4.确保firefox下省略号的出现

代码如下

复制代码