单行省略号纯css解决方案

核心css代码

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查看