网站用户体验整合设计-Div+Css实例：用CSS控制字符宽度省略号效果

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

Post by 张美工, 2010-8-4, Views:

<!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控制字符宽度省略号效果</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.zhangmeigong.cn">一个在IE6下no-repeat依然重复背景图片的BUG</a></li>
<li><a href="http://www.zhangmeigong.cn ">Div+Css实例：用CSS制作的热门内容排行效果</a></li>
<li><a href="http://www.zhangmeigong.cn ">Div+Css:浅淡!important对CSS的重要性</a></li>
<li><a href="http://www.zhangmeigong.cn">用CSS实现中英文双语导航菜单</a></li>
</ul>
</body>
</html>

Tags: DivCss实例：用CSS控制字符宽度省略号效果

分类:css+div | 评论:0 | 引用:0

上一篇：分享几种JS烟花
下一篇：控制文本框字符数

或许你还对下面的文章感兴趣

Comments

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

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

或许你还对下面的文章感兴趣

Comments

最新文章

最新评论

Guest