css中对于文字溢出时的控制
css中对于文字溢出时的控制可以通过text-overflow:clip|ellipsis作溢出控制；
其中clip只是作简单的裁切；ellipsis在裁切的同时添加"..."，这种方式比js截取字符的方式要好些（针对搜索优化seo）。
但是text-overflow:clip|ellipsis火狐下是不支持的。
那么我们如何来控制火狐下文字溢出呢？
在这里介绍两种方法：
方法一：你可以看到火狐下被截取的文本后面也添加了"..."，那么这是如何做到的呢，代码如下：
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>yanll_20080505</title> <style type="text/css"> ul {width: 200px;margin: 40px auto;padding: 12px 4px 12px 24px;border: 1px solid #005fb0;background: #e0f1ff;} li {margin: 12px 0;width: 200px; } li a {display: block;overflow: hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;} /* firefox only */ li:not(p) {clear: both;width: 200px;} li:not(p) a {float: left;width: 170px;} li:not(p):after {content: "..."; float: left;width: 25px;padding-left: 5px;color: #999;} </style> </head> <body> <ul> <li><a href="http://www.vegoo.net/">登录个人门户，会有网站引导员指引你进入你的个人门户、你的社区、你的音乐盒</a></li> <li><a href="http://www.vegoo.net/">登录个人门户，会有网站引导员指引你进入你的</a></li> <li><a href="http://www.vegoo.net/">登录个人门户，会有网站引导员指引你进入</a></li> <li><a href="http://www.vegoo.net/">登录个人门户，会有网站引导员指引你进入你的个人门户、你的社区、你的音乐盒</a></li> <li><a href="http://www.vegoo.net/">登录个人门户，会有网站引导员</a></li> <li><a href="http://www.vegoo.net/">登录个人门户，会有网站引导员指引你进入</a></li> </ul> </body> </html>
我们来分析一下这段代码，其中css样式中
/* firefox only 针对火狐设置*/
li:not(p) {clear: both;width: 200px;} /*改变li本身的属性，去除li本身的浮动*/
li:not(p) a {float: left;width: 170px;} /*a元素是li里的对象，让a对象左浮动，如果li中文本没有链接，可以替换成span*/
li:not(p):after {content: "..."; float: left;width: 25px;padding-left: 5px;color: #999;}/*在每一个被裁切的li后面添加"..."*/。
方法二：你可以看到，IE下是被截取出现"...",火狐下被截取，类似text-overflow:clip的结果，这种方法适用于li宽度的不定的情况下；
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>yanll_20080505</title> <style type="text/css"> ul {width: 200px;margin: 40px auto;padding: 12px 4px 12px 24px;border: 1px solid #005fb0;background: #e0f1ff;} li {margin: 12px 0; } li a {display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} </style> </head> <body> <ul> <li><a href="http://www.vegoo.net/">登录个人门户，会有网站引导员指引你进入你的个人门户、你的社区、你的音乐盒</a></li> <li><a href="http://www.vegoo.net/">登录个人门户，会有网站引导员指引你进入你的</a></li> <li><a href="http://www.vegoo.net/">登录个人门户，会有网站引导员指引你进入</a></li> <li><a href="http://www.vegoo.net/">登录个人门户，会有网站引导员指引你进入你的个人门户、你的社区、你的音乐盒</a></li> <li><a href="http://www.vegoo.net/">登录个人门户，会有网站引导员</a></li> <li><a href="http://www.vegoo.net/">登录个人门户，会有网站引导员指引你进入</a></li> </ul> </body> </html>
这种方法是不是简单的多呢^_^呵呵，其中与方法一最大的区别就在li{display:block}，当改变了li的display属性以后，就可以对它进行轻松的裁切了。
