内容正在载入中,请稍后……
公告
About me
搜索
统计
其他
31 Mar.2009

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

作者: 我就是个世界   分类:技术&学习 » DIV+CSS   出处:大龙部落            | |
引用
更新:
text-overflow:ellipsis;

可以把截取的最后变成省略号,很不错的功能,在蓝色理想看到的,记录下,不过MS是IE only,FF也显示为截断,而不显示省略号,比较可惜。(IE6,IE7,FIREFOX亲测)

示例:text-overflow-ellipsis.html

下载:


       一般情况下我们都是在程序里控制标题截取字符数,但有时候你不能更改源程序,或者程序根本就没必要去动程序,那么我们就需要用一种更简单、更直接、更适用的方法来达到截取标题字符数的目的。今天我们就用DIV+CSS来完美实现新闻列表标题的截取,用 css代码直接解决,不但简单,而且效果比用程序实现的更完美,因为用程序控制,只能固定截取多少个字符,而用css的话可以自己适应列表的宽度,需要用到的CSS属性: height, overflow: hidden;

用css完美实现新闻列表标题的截取演示
------------------------------------------------------------------------------------

先看一个未截取新闻标题的例子:

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>



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;}


运行以上代码看效果如下:
Highslide JS



    当标题太长时,由于列表有宽度限制,多余的部分便会被挤到下一行,很不美观,那么现在我们来用CSS的属性来达到截取标题字符数的目的。需要更改以下.content ul li代码:

.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;
}


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

更改并运行以上代码看效果如下:
Highslide JS


完整代码:
<!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>


完整代码演示:


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

例子下载:

分享到QQ空间
最后编辑: 我就是个世界 编辑于December 17, 2010 16:13
时间:10:58 评论(0) 引用(0) 阅读(4919) Tags: , , , ,
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮
OpenID登入 权限选项 表情