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

主营企业建站，seo优化，手机网站，微信网站开发等业务！>> 繁体中文

　您现在的位置：首页 >> 网站运营 >> 详细内容>>　　　　　　　【字体：大中小】【颜色：红绿蓝黑】

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

作者: 优内科技来源: 优内科技驻站日期:2009/8/17 【加入收藏】【打印此页】【关闭】

　　兼容浏览器的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>

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

收藏到网摘：

E- mail:master@cck5.com 点击这里给我发消息

客服专员 QQ:310203268 点击这里给我发消息

技术咨询 QQ:22071287 点击这里给我发消息

代理备案 QQ:529631515
丰富的网站建设经验，专业提供网站建设、网站制作、网页设计服务，专业设计，真诚服务，不满意不收费！
Copyright 2008 - 2025 cck5 Inc. All Rights Reserved 优内建站网络科技公司
本站部分资源来自网络,如有侵犯您的版权,请告之,我们将即刻删除!QQ:310203268
主要业务：网站建设、企业建站、专业建站、智能建站、SEO优化、微信建站、手机建站

本站ICP备案号：浙ICP备11019299号中国电信增值ICP经营许可证

扫优内微信二维码
“码”上有惊喜