PHP技术,PHP研究及学习,Python学习,人工智能,大数据服务

PHP+Python » 前端设计 » css自适应,LI表格宽度自适应,自动替换标题过长用省略号代替

css自适应,LI表格宽度自适应,自动替换标题过长用省略号代替

此文被围观1654日期: 2013-01-24 分类 : 前端设计  标签:  ········
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&nbsp;&nbsp;&nbsp; </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&nbsp;&nbsp;&nbsp; </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&nbsp;&nbsp;&nbsp; </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&nbsp;&nbsp;&nbsp; </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&nbsp;&nbsp;&nbsp; </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&nbsp;&nbsp;&nbsp; </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&nbsp;&nbsp;&nbsp; </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&nbsp;&nbsp;&nbsp; </a> </span> </li> </ul> </div> </body></html> [/php]

本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2018adophper.com All Rights Reserved.