<!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>
![](https://images2015.cnblogs.com/blog/635478/201604/635478-20160413163759191-316326576.png)