[quote]更新：
[code]text-overflow:ellipsis;[/code]
可以把截取的最后变成省略号，很不错的功能，在[url=http://www.blueidea.com/bbs/NewsDetail.asp?DaysPrune=0&lp=7&id=1824039]蓝色理想[/url]看到的，记录下，不过MS是IE only，FF也显示为截断，而不显示省略号，比较可惜。（IE6,IE7,FIREFOX亲测）
示例：[url=http://www.husw.net/blog/attachment/200903/1238469365_64868d04.html]text-overflow-ellipsis.html [/url]
下载：[file][attach]223[/attach][/file]
[/quote]
一般情况下我们都是在程序里控制标题截取字符数，但有时候你不能更改源程序，或者程序根本就没必要去动程序，那么我们就需要用一种更简单、更直接、更适用的方法来达到截取标题字符数的目的。今天我们就用DIV+CSS来完美实现新闻列表标题的截取,用 css代码直接解决，不但简单，而且效果比用程序实现的更完美，因为用程序控制，只能固定截取多少个字符，而用css的话可以自己适应列表的宽度，需要用到的CSS属性： [color=#FF0000]height， overflow: hidden;[/color]
[url=http://www.husw.net/blog/attachment/200903/1238467873_2640b76c.html][b][color=#FF0000]用css完美实现新闻列表标题的截取演示[/color][/b][/url]
[color=#C0C0C0]------------------------------------------------------------------------------------[/color]
[color=#008000]先看一个未截取新闻标题的例子：[/color]
[b]html代码：[/b][separator]
[code]
<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>
[/code]
[b]css代码：[/b]
[code]
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;}
[/code]
运行以上代码看效果如下：
[img][attach]220[/attach][/img]
当标题太长时，由于列表有宽度限制，多余的部分便会被挤到下一行，很不美观，那么现在我们来用CSS的属性来达到截取标题字符数的目的。需要更改以下[color=#FF0000].content ul li[/color]代码：
[code].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;
}[/code]
其实代码很好解释，当标题太长时，由于列表有宽度限制，多余的部分便会被挤到下一行，而现在我们控制了标题的高度，又设置了溢位隐藏，所以被挤到下一行的代码就看不到了，达到了截取字符的目的。
更改并运行以上代码看效果如下：
[img][attach]221[/attach][/img]
[b]完整代码：[/b]
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 用css完美实现新闻列表标题的截取 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="husw,awen515@163.com,www.husw.net">
<META NAME="Keywords" CONTENT="www.husw.net,DIV,CSS,overflow,列表样式,新闻标题截取,css-news-list-ellipsis">
<META NAME="Description" CONTENT="用css完美实现新闻列表标题的截取">
<style>
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;}
</style>
</HEAD>
<BODY>
<div class="content">
<h2 class="bar"><a href="list?tid=7">程序发布</a></h2>
<ul>
<li><span id="date">[11-29]</span>[<a href="http://www.husw.net/blog/" >测试程序</a>] <a href="http://www.husw.net/blog/post/css-news-list-ellipsis.php" 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="http://www.husw.net/blog/" >程序补丁</a>] <a href="http://www.husw.net/blog/post/css-news-list-ellipsis.php" title='发布可编辑评论补丁'>发布可编辑评论补丁发布可编辑评论补丁发布可编辑评论补丁</a></li>
<li><span id="date">[10-11]</span>[<a href="http://www.husw.net/blog/" >最新程序</a>] <a href="http://www.husw.net/blog/post/css-news-list-ellipsis.php" title='发布Phpwind论坛调用程序'>发布Phpwind论坛调用程序</a></li>
<li><span id="date">[10-11]</span>[<a href="http://www.husw.net/blog/" >最新程序</a>] <a href="http://www.husw.net/blog/post/css-news-list-ellipsis.php" title='[更新]发布Discuz论坛调用程序'>[更新]发布Discuz论坛调用程序发布Discuz论坛调用程序</a></li>
<li><span id="date">[10-06]</span>[<a href="http://www.husw.net/blog/" >程序补丁</a>] <a href="http://www.husw.net/blog/post/css-news-list-ellipsis.php" title='最新更新：刚刚修正几个程序的BUG'>最新更新：刚刚修正几个程序的BUG几个程序的BUG</a></li>
</ul>
</div>
</BODY>
</HTML>[/code]
[b]完整代码演示：[/b]
[html]
用css完美实现新闻列表标题的截取 [/html]
[b]例子下载：[/b]
[file][attach]222[/attach][/file]
