站内首页 > 网页前端 > HTML > 正文

用css实现标题自适应截取

调节下浏览器的宽度可以自适应宽度截取。好了，现在来看实现方法(css代码)：

js 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{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{olor:#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>
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{olor:#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>
<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 Hack 汇总快查-[if lte IE 6]一些实用的css代码集锦 >>

查看所有评论

相关文章

在线留言

© 2021

i0561搜索.All rights reserved. v3.24