Div+Css实例：用CSS控制字符宽度省略号效果--瀚海软件评论--Power By JYcms!

当前位置：首页 » 软件秘技 » 多媒体类 » Div+Css实例：用CSS控制字符宽度省略号效果

Div+Css实例：用CSS控制字符宽度省略号效果

作者:will2011 更新时间:2008/12/31 15:10:56 来源:52css 【字号: 大中小】本条信息浏览人次共有次

　　兼容浏览器的CSS控制字符宽度省略号效果，是非常实用的，由于FF对溢出显示省略号的属性支持不好。因而在进行编码时，应用到了一个HACK和FF的私有属性，大家在学习时注意区别。

Source Code to Run

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Div+Css实例：用CSS控制字符宽度省略号效果--中国IT人才网!IT求职,IT招聘</title>
</head>
<style type="text/css">
*{ margin:0; padding:0;}
a{ text-decoration:none; color:#000000;}
a:hover{ text-decoration:none; color:#000000;}
ul{ width:300px; height:120px; margin:40px auto; padding:12px 4px 12px 24px; border:1px solid #D4D4D4; background:#F1F1F1;}
li{ margin:12px 0; }
li a{ display:block; width:200px; overflow:hidden;/*注意不要写在最后了*/white-space:nowrap; -o-text-overflow:ellipsis;text-overflow:ellipsis;}
/* firefox only */
li:not(p){ clear:both;}
li:not(p) a{ max-width:170px; float:left;}
li:not(p):after{ content: "..."; float:left; width:40px; padding-left:5px; color:#000;}
</style>
<body>
<ul>
 <li><a href="http://www.51itrencai.com/Programming/Info.asp?infoid=210">一个在IE6下no-repeat依然重复背景图片的BUG</a></li>
 <li><a href="http://www.51itrencai.com/Programming/Info.asp?infoid=198">Div+Css实例：用CSS制作的热门内容排行效果</a></li>
 <li><a href="http://www.51itrencai.com/Programming/Info.asp?infoid=193">Div+Css:浅淡!important对CSS的重要性</a></li>
 <li><a href="http://www.51itrencai.com/Programming/Info.asp?infoid=160">用CSS实现中英文双语导航菜单</a></li>
</ul>
</body>
</html>

[可先修改部分代码再运行查看效果]

【关闭窗口】【我要打印】

【免责声明：本站所发表的文章，大部分来源于各相关媒体或者网络，内容仅供参阅，与本站立场无关。如有不符合事实，或影响到您利益的文章，请及时告知，本站立即删除。谢谢监督。】

发表评论

* 评论内容：

* 您的大名：	* 您的email：
* 验证码： *请输入4位数的验证码

发表评论须知：一、所发文章必须遵守《互联网电子公告服务管理规定》；二、严禁发布供求代理信息、公司介绍、产品信息等广告宣传信息；三、严禁恶意重复发帖；四、严禁对个人、实体、民族、国家等进行漫骂、污蔑、诽谤。