单行省略号纯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查看