.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;
}
----------------html 1-----------
<html>
<head>
<style type="text/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;
}
.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;
}.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;
}
</style>
<!--大家注意对比两个css的不同之处,就是这行代码: height: 21
px;overflow: hidden; ,其实代码很好解释,当标题太长时,由于列表有宽度限制,多余的部分便会被挤到下一行,而现在我们控制了标题的高度,又设置了溢位隐藏,所以被挤到下一行的代码就看不到了,达到了截取字符的目的。 附html代码:
-->
</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="#">测试程序</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>
</body>
</html>
-------------------------------html 2--------------
<html>
<head>
</head>
<body>
<!--
代码很简单,基本上应该很容易就可以看明白,主要在于“text-overflow”这个属性,此属性有2个值,分别
是“ellipsis”和 “clip”,简单的理解,第一个值会在截取之后在文字末端加上省略号,第二个值则不会。
-->
<div style="width: 200px; border: 1px dashed red; overflow: hidden; text-overflow: ellipsis">
<nobr> 就是比如有一行文字,很长,表格内一行显示不下.</nobr>
<nobr>就a是比如有一行文字,很长,表格内一行显示不下.</nobr>
<nobr>就1是比如有一行文字,很长,表格内一行显示不下.</nobr>
<nobr>就F是比如有一行文字,很长,表格内一行显示不下.</nobr>
<nobr>就是 Like You Pig Very Very Very Much.</nobr>
</div>
在Table中的方法:
<table style="table-layout: fixed; border-collapse: collapse; font-size: 12px;" border="1"
width="200" bordercolor="#666666">
<tr>
<td nowrap style="overflow: hidden; text-overflow: clip;">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
容内容
</td>
</tr>
</table>
</body>
</html>