比如表格中有显示一段比较多的文字,要是全部显示时表格会乱,所以固定几个字的长度,然后用省略号显示。鼠标放到上面时下面显示全部内容。
<html> <head> <script type="text/javascript" src="${pageContext.request.contextPath}/ifreame/js/pub/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/ifreame/js/pub/jquery.corner.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/ifreame/js/pub/kandytabs.pack.js"></script> </head> <body style="font-size:30px;"> <hr/> <br/> <table border="1" width="100%" cellpadding="0" cellspacing="0" style="table-layout:fixed;"> <caption></caption> <thead> <tr> <td>游戏id</td> <td>游戏名称</td> <td>版本</td> <td>游戏简介</td> <td>玩家数量</td> <td>星级</td> <td>游戏图标路径</td> <td>游戏图标名称</td> <td>可用状态</td> <td>游戏上线时间</td> <td>是否支持客户端</td> <td>游戏储存路径</td> <td>游戏文件名</td> <td>游戏密钥</td> <td>游戏厂商ID</td> <td colspan="2" align="center">修改/删除</td> </tr> </thead> <tbody> <s:iterator value="demand"> <tr> <td>${g_id }</td> <td>${g_name }</td> <td>${g_version }</td> <td>${g_desc }</td> <td>${g_players }</td> <td>${g_star }</td> <td>${g_imagepath }</td> <td>${g_imagename }</td> <td>${g_status }</td> <td>${g_onlinetime }</td> <td>${g_isclient }</td> <td>${g_gamepath }</td> <td>${g_gamename }</td> <td>${g_key }</td> <td>${gc_id }</td> <td><a href="#" onclick="update('${g_id}')">修改</a></td> <td><a href="#" onclick="del('${g_id}')">删除</a></td> </tr> </s:iterator> </tbody> </table> </body> </html>
用红色和黄色表示的是文字多的字段。
从action中迭代出来的内容。
今天在工作中遇到一个问题,查阅了好多资料,发现没有这方面的答案。现在问题解决了,我把解决方法共享出来,以便将来有人遇到同样的问题时,可以参考。
这个问题是,在列表中,从数据库中取出字段,内容比较多,如果全显示,则影响版面的美观,以前我们一般是在链接后面加上查看,把那些内容多的全显示出来,但这次没有查看这个功能,所以只有在列表中全部显示出来。之前考虑过用JS来实现,但感觉比较麻烦,最近查阅到CSS有这种功能,故用CSS来实现。
首先定义:
<style>
.ellipsis_div{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
wzy:expression(void(this.title=this.innerText));
}
</style>
再应用它,如:
<td><div class=ellipsis_div style="width:350px;background-color:#cc88ff;"><%=commonlyLogView.getOptInfo()%></div>
<JS实现>
function getSubString(oldString,length){
if(oldString.length>length){
oldString=oldString.substr(0,length)+"...";
}
return oldString;
}
<td title="questionsList[i].questionsSetName">getSubString(questionsList[i].questionsSetName,10)</td>
从别人那里转的 希望对大家有点作用