核心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,设置链接标题在一行显示超过省略号

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

更多资料

小小赞助大大帮助

如果您觉得本文的内容对您的学习有所帮助:

支付鼓励

轻轻一点,是您对我的支持