网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

支持FF/IE css自动截取字符串

关注我吧
 2011/7/29 9:45:37 阅读次数:3375

因为了最近在考虑用程序控制超长字符用...显示。但是有人说可以用CSS控制啊,我是知道CSS肯定比程序好。所以经过多次测试,FF是支持伪类:after显示的。

代码如下:

<style type="text/css">
.div1{width:200px;font-size:12px;}
.div1 span{
   white-space:nowrap;
   text-overflow:ellipsis; /* for IE */
   overflow:hidden;
   width:168px;
   display:inline;
   float:left;
   color:#f60;
}

html>body .div1:after{/* for FF/IE8+*/
   content: "...";
   color:#f60;
   margin-left:5px;}</style>

<div class="div1">
	<span>支持FF/IEcss自动截取字符串自动截取字符串</span>
</div>

我发现在IE8+也支持。所以在*text-overflow:ellipsis; /* for IE */得判断是IE。

代码如下:

<style type="text/css">
.div1{width:200px;font-size:12px;}
.div1 span{
   white-space:nowrap;
   *text-overflow:ellipsis; /* for IE */
   overflow:hidden;
   width:168px;
   display:inline;
   float:left;
   color:#f60;
}

html>body .div1:after{/* for FF/IE8+*/
   content: "...";
   color:#f60;
   margin-left:5px;}</style>
<div class="div1">
	<span>支持FF/IEcss自动截取字符串自动截取字符串</span>
</div>

好了,搞定相信用怪了那些程序截取的看了这篇文件以后就会用CSS截取字符了!


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

0
无觅相关文章插件,快速提升流量
阅读全文内容关闭