css自适应,LI表格宽度自适应,自动替换省略号 LI 表格 宽度自适应 自动替换省略号
实用对象：文章标题排序的时候
在文章列表中因为网页宽度的限制，有些长标题文章可能无法完全显示，有用程序截取，那样对seo好像不是很理想。
这里讲解一下用CSS来解决li表格宽度自适应
请看源码:
注意css:text-overflow: ellipsis;
[php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<html class="no-js" lang="en">
<head><style>
.table
{
width: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.table ul
{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
display: block;
list-style-type: none;
list-style-position: outside;
list-style-image: none;
}
.table ul li
{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
display: block;
}
.table li span
{
float: left;
display: block;
}
.table li.thead
{
text-align: center;
line-height: 36px;
font-weight: bold;
float: none;
background-color: rgb(201, 227, 242);
}
.table li.tbody
{
line-height: 32px;
float: none;
background-color: rgb(238, 245, 250);
}
.table .auto
{
width: auto;
overflow: hidden;
float: none;
}
.autocut
{
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style></head>
<body>
<div class="table">
<ul>
<li class="thead">
<span class="checkbox">
<input id="chk_select_all" onclick="select_all('mail_id[]')" type="checkbox" value="all" />
</span>
<span style="width: 140px;">
发件人 </span>
<span style="width: 100px; float: right;"> 时间 </span>
<span class="ico_mailtitle" style="width: 20px; float: right;"></span>
<span class="autocut auto">主 题</span>
</li>
<li class="tbody normal">
<span class="checkbox">
<input name="mail_id[]" type="checkbox" value="663" />
</span>
<span class="autocut" style="width: 120px;">
<a title="no-reply@adophper.com" email="no-reply@adophper.com">adophper Competitions Team</a> </span>
<span style="width: 100px; text-align: center; float: right;"> 2013-01-20 </span>
<span style="width: 20px; float: right;">
<div class="readed"></div>
<div class=""></div>
</span>
<span class="autocut auto">
<a title="adophper Single Round Match 567" href="/Mail/read/id/663"> adophper Single Round Match 567
</a> </span>
</li>
<li class="tbody normal">
<span class="checkbox">
<input name="mail_id[]" type="checkbox" value="663" />
</span>
<span class="autocut" style="width: 120px;">
<a title="no-reply@adophper.com" email="no-reply@adophper.com">adophper Competitions Team</a> </span>
<span style="width: 100px; text-align: center; float: right;"> 2013-01-20 </span>
<span style="width: 20px; float: right;">
<div class="readed"></div>
<div class=""></div>
</span>
<span class="autocut auto">
<a title="adophper Single Round Match 567" href="/Mail/read/id/663"> adophper Single Round Match 567
</a> </span>
</li>
<li class="tbody normal">
<span class="checkbox">
<input name="mail_id[]" type="checkbox" value="663" />
</span>
<span class="autocut" style="width: 120px;">
<a title="no-reply@adophper.com" email="no-reply@adophper.com">adophper Competitions Team</a> </span>
<span style="width: 100px; text-align: center; float: right;"> 2013-01-20 </span>
<span style="width: 20px; float: right;">
<div class="readed"></div>
<div class=""></div>
</span>
<span class="autocut auto">
<a title="adophper Single Round Match 567" href="/Mail/read/id/663"> adophper Single Round Match 567
</a> </span>
</li>
<li class="tbody normal">
<span class="checkbox">
<input name="mail_id[]" type="checkbox" value="663" />
</span>
<span class="autocut" style="width: 120px;">
<a title="no-reply@adophper.com" email="no-reply@adophper.com">adophper Competitions Team</a> </span>
<span style="width: 100px; text-align: center; float: right;"> 2013-01-20 </span>
<span style="width: 20px; float: right;">
<div class="readed"></div>
<div class=""></div>
</span>
<span class="autocut auto">
<a title="adophper Single Round Match 567" href="/Mail/read/id/663"> adophper Single Round Match 567
</a> </span>
</li>
<li class="tbody normal">
<span class="checkbox">
<input name="mail_id[]" type="checkbox" value="663" />
</span>
<span class="autocut" style="width: 120px;">
<a title="no-reply@adophper.com" email="no-reply@adophper.com">adophper Competitions Team</a> </span>
<span style="width: 100px; text-align: center; float: right;"> 2013-01-20 </span>
<span style="width: 20px; float: right;">
<div class="readed"></div>
<div class=""></div>
</span>
<span class="autocut auto">
<a title="adophper Single Round Match 567" href="/Mail/read/id/663"> adophper Single Round Match 567
</a> </span>
</li>
<li class="tbody normal">
<span class="checkbox">
<input name="mail_id[]" type="checkbox" value="663" />
</span>
<span class="autocut" style="width: 120px;">
<a title="no-reply@adophper.com" email="no-reply@adophper.com">adophper Competitions Team</a> </span>
<span style="width: 100px; text-align: center; float: right;"> 2013-01-20 </span>
<span style="width: 20px; float: right;">
<div class="readed"></div>
<div class=""></div>
</span>
<span class="autocut auto">
<a title="adophper Single Round Match 567" href="/Mail/read/id/663"> adophper Single Round Match 567
</a> </span>
</li>
<li class="tbody normal">
<span class="checkbox">
<input name="mail_id[]" type="checkbox" value="663" />
</span>
<span class="autocut" style="width: 120px;">
<a title="no-reply@adophper.com" email="no-reply@adophper.com">adophper Competitions Team</a> </span>
<span style="width: 100px; text-align: center; float: right;"> 2013-01-20 </span>
<span style="width: 20px; float: right;">
<div class="readed"></div>
<div class=""></div>
</span>
<span class="autocut auto">
<a title="adophper Single Round Match 567" href="/Mail/read/id/663"> adophper Single Round Match 567
</a> </span>
</li>
<li class="tbody normal">
<span class="checkbox">
<input name="mail_id[]" type="checkbox" value="663" />
</span>
<span class="autocut" style="width: 120px;">
<a title="no-reply@adophper.com" email="no-reply@adophper.com">adophper Competitions Team</a> </span>
<span style="width: 100px; text-align: center; float: right;"> 2013-01-20 </span>
<span style="width: 20px; float: right;">
<div class="readed"></div>
<div class=""></div>
</span>
<span class="autocut auto">
<a title="adophper Single Round Match 567" href="/Mail/read/id/663"> adophper Single Round Match 567
</a> </span>
</li>
</ul>
</div>
</body></html>
[/php]
川公网安备51162302000234