<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>text-overflow制作固定区域的博客列表</title> <link rel="stylesheet" type="text/css" href="http://www.w3cplus.com/demo/css3/base.css" media="all" /> <style type="text/css"> .block { margin: 0 auto; margin-top: 20px; width: 318px; line-height: 20px; border: 1px solid #fc9; } .block ol { padding-left: 23px; width: 14em; background: url(bg.png) no-repeat 2px 4px; } .block li { clear: both; margin: 0; padding: 0; list-style: none outside none; } .block li a { float: left; _display:inline; max-width: 14em; white-space: nowrap; _white-space:normal; _heigth:20px; overflow: hidden; text-overflow: ellipsis; -o-text-overflow:ellipsis; color: #333; _background:transparent; } .block li span{ _position: relative; float: left; _display:inline; margin-right:-99px; padding-left: 10px; font-size: 10px; color:#999; } </style> </head> <body> <div class="block"> <h3>最新博文</h3> <ol class="clearfix"> <li><a href="#">如何和何时使用CSS的!important</a><span>2013-02-19</span></li> <li><a href="#">社交媒体网站设计尺寸参考</a><span>2013-02-19</span></li> <li><a href="#">10个简单有效的方法帮你改善jQuery代码与性能</a><span>2013-01-28</span></li> <li><a href="#">预处理器的对比——Sass、LESS和Stylus</a><span>2013-01-26</span></li> <li><a href="#">43个处理触摸事件的jQuery插件</a><span>2013-01-09</span></li> <li><a href="#">2012年国外优秀前端网站</a><span>2013-01-02</span></li> <li><a href="#">CSS团队精神：CSS最佳实践团队开发</a><span>2012-12-31</span></li> <li><a href="#">使用CSS3的background-size优化苹果的Retina屏幕的图像显示</a><span>2012-12-26</span></li> <li><a href="#">你应该知道的一些事情——CSS权重</a><span>2012-12-21</span></li> <li><a href="#">使用CSS Scriptes来优化你的网站在Retina屏幕下显示</a><span>2012-12-18</span></li> </ol> </div> </body> </html>
