用css实现新闻列表中完美的标题截取

转自http://www.macrolong.com/styles/css-tech/2007/02/css-news-list-ellipsis-76/

text-overflow:ellipsis;
可以把截取的最后变成省略号，很不错的功能，在蓝色看到的，记录下，不过MS是IE only，比较可惜。

书接上回，昨天和大家一起分享了div+css布局中新闻列表的做法：点击查看，感觉不太美观，不要紧，我们先来美化一下，下面是MePHP cms中的例子：点击查看。
　　代码如下(只列出了css代码)：

body{
 font: 12px/18px Verdana, Arial, Helvetica, sans-serif;
 background-color: #F8F8F8;
 color: #333;
}
a:link, a:visited{
 text-decoration: none;
 font-size: 12px;
 color: #333333;
}
a:hover{
 text-decoration: underline;
 color: #0066FF;
}
.content{
 float:left;
 width:40%;
 height:auto;
 border: 1px solid #ccc;
 background-color: #FFF;
}
.content ul{ padding:3px; padding-bottom:6px; margin:0; list-style:none;}
.content ul li{
 line-height: 21px;
 border-bottom: 1px solid #F0F0F0;
 background: url(images/dot.gif) no-repeat 0px 8px;
 padding-left: 10px;
}
.bar{
 color:#FFF;
 height:20px;
 font-weight:bold;
 background:#698FC7;
 text-indent: 15px;
 line-height: 20px;
 margin: 0px;
 padding: 0px;
 border: 3px double #698FC7;
}
.bar a:link ,.bar a:visited,.bar a:hover{
 color:#FFF;
 text-decoration: none;
}
#date{ float:right;}

　　大家是不是感觉比原来的漂亮多了，可以登上台面了，呵呵，不过新的问题又来了，因为新闻标题的长度太长了，有分成了两行甚至三行，这样看着也太难看了，有的朋友说了：＂在程序里控制下截取字符不就行了．＂，是啊，这个是最常用的方法，也是大部分新闻系统采用的．不过我们今天不谈程序的问题，要用 css代码直接解决，不但简单，而且效果比用程序实现的更完美，因为用程序控制，只能固定截取多少个字符，而用css的话可以自己适应列表的宽度，现在就来看下效果：点击查看．ok成功了，大家可以自己调节下浏览器的宽度看看，是不是可以自适应宽度截取。好了，现在来看实现方法(css代码)：

body{
 font: 12px/18px Verdana, Arial, Helvetica, sans-serif;
 background-color: #F8F8F8;
 color: #333;
}
a:link, a:visited{
 text-decoration: none;
 font-size: 12px;
 color: #333333;
}
a:hover{
 text-decoration: underline;
 color: #0066FF;
}
.content{
 float:left;
 width:40%;
 height:auto;
 border: 1px solid #ccc;
 background-color: #FFF;
}
.content ul{ padding:3px; padding-bottom:6px; margin:0; list-style:none;}
.content ul li{
 border-bottom: 1px solid #F0F0F0;
 height: 21px;
 overflow: hidden; /*首先设定列表的高度，然后用溢位隐藏*/
 line-height: 21px;/*字体行高最好要和列表高度一样或者大些*/
 background: url(images/dot.gif) no-repeat 0px 8px;
 padding-left: 10px;
}
.bar{
 color:#FFF;
 height:20px;
 font-weight:bold;
 background:#698FC7;
 text-indent: 15px;
 line-height: 20px;
 margin: 0px;
 padding: 0px;
 border: 3px double #698FC7;
}
.bar a:link ,.bar a:visited,.bar a:hover{
 color:#FFF;
 text-decoration: none;
}
#date{ float:right;}
　　大家注意对比两个css的不同之处，就是这行代码： 

height: 21px;overflow: hidden;
，其实代码很好解释，当标题太长时，由于列表有宽度限制，多余的部分便会被挤到下一行，而现在我们控制了标题的高度，又设置了溢位隐藏，所以被挤到下一行的代码就看不到了，达到了截取字符的目的。

附html代码：

<div class="content">
            <h2 class="bar"><a href="list?tid=7">程序发布</a></h2>
                 <ul>
 
                   <li><span id="date">[11-29]</span>[<a href=#>测试程序</a>] <a href=# title='test'>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</a></li>
                    <li><span id="date">[10-25]</span>[<a href=#>程序补丁</a>] <a href=# title='发布可编辑评论补丁'>发布可编辑评论补丁发布可编辑评论补丁发布可编辑评论补丁</a></li>
                    <li><span id="date">[10-11]</span>[<a href=#>最新程序</a>] <a href=# title='发布Phpwind论坛调用程序'>发布Phpwind论坛调用程序</a></li>
 
                    <li><span id="date">[10-11]</span>[<a href=#>最新程序</a>] <a href=# title='[更新]发布Discuz论坛调用程序'>[更新]发布Discuz论坛调用程序发布Discuz论坛调用程序</a></li>
                    <li><span id="date">[10-06]</span>[<a href=#>程序补丁</a>] <a href=# title='最新更新：刚刚修正几个程序的BUG'>最新更新：刚刚修正几个程序的BUG几个程序的BUG</a></li>
                </ul>
</div>