firefox从7.0开始兼容text-overflow:ellipsis;这样的话，以后单行的省略号就可以不借助后台程序或者js来做到浏览器兼容了，其核心代码为：
selector{-o-text-overflow: ellipsis;/*兼容opera*/text-overflow: ellipsis;/*这就是省略号喽*/ overflow: hidden;/*设置超过的隐藏*/white-space: nowrap;/*设置不折行*/width:200px;/*设置宽度*/}demo 1 宽度为350px
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus.
Html Code
<ul id="demo1">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus.</li>
</ul>
Css Code
#demo1 li{-o-text-overflow: ellipsis;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;width:250px;margin-left:12px;list-style:disc inside none;}
注：因为设置了li的overflow为hidden，所以如果要设置其list-style，则需要设置为inside，而不是outside，不然将会看不见你设置的list-style效果
demo 2 宽度为104px，设置链接标题在一行显示超过省略号
单行省略号纯css解决方案
ie6 png解决方案
图文混排解决方案
Html Code
<ul id="demo2" class="nostyle clearfix">
<li><a href="#"><img src="http://placehold.it/100/e3e3e3/00c5e3&text=demo" alt="img1"><strong>单行省略号纯css解决方案</strong></a></li>
<li><a href="#"><img src="http://placehold.it/100/e3e3e3/00c5e3&text=demo" alt="img2"><strong>ie6 png解决方案</strong></a></li>
<li><a href="#"><img src="http://placehold.it/100/e3e3e3/00c5e3&text=demo" alt="img3"><strong>图文混排解决方案</strong></a></li>
</ul>
Css Code
#demo2 li{width:104px;float:left;margin-right:20px;display:inline;}#demo2 img{padding:2px;border:1px solid #ccc;}#demo2 strong{-o-text-overflow: ellipsis;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;width:104px;display:block;}
注：请注意不要在行内元素里面使用块级元素，如这个demo我们使用strong作为标题的标签而不是h或者p，css代码部分没有贴出nostyle和clearfix的class代码，请使用firebug查看