网页前端设计

因为了最近在考虑用程序控制超长字符用...显示。但是有人说可以用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截取字符了！

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