大龙部落

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

Feb 9, 2007 by 大龙

相关文章(随机):

None

更新：

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>

Tags: css