控制字符宽度省略号效果
控制字符宽度省略号效果
- <!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.theued.com">一个在IE6下no-repeat依然重复背景图片的BUG</a></li>
- <li><a href="http://www.theued.com">Div+Css实例：用CSS制作的热门内容排行效果</a></li>
- <li><a href="http://www.theued.com">Div+Css:浅淡!important对CSS的重要性</a></li>
- <li><a href="http://www.theued.com">用CSS实现中英文双语导航菜单</a></li>
- </ul>
- </body>
- </html>
复制代码
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论