关于表格文本框中的内容多时用省略号显示

功夫panda 发布于 2012/02/03 15:38
阅读 3K+
收藏 1

比如表格中有显示一段比较多的文字,要是全部显示时表格会乱,所以固定几个字的长度,然后用省略号显示。鼠标放到上面时下面显示全部内容。

<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中迭代出来的内容。

加载中
0
功夫panda
功夫panda

今天在工作中遇到一个问题,查阅了好多资料,发现没有这方面的答案。现在问题解决了,我把解决方法共享出来,以便将来有人遇到同样的问题时,可以参考。

这个问题是,在列表中,从数据库中取出字段,内容比较多,如果全显示,则影响版面的美观,以前我们一般是在链接后面加上查看,把那些内容多的全显示出来,但这次没有查看这个功能,所以只有在列表中全部显示出来。之前考虑过用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>

 

从别人那里转的  希望对大家有点作用

0
一剑倾城
一剑倾城
<table width="200px" style="table-layout:fixed">
<tr>
<td style="overflow:hidden; height:20px; width:200px;text-overflow:ellipsis;word-break:keep-all">
乾三连坤六断震仰盂艮覆碗离中虚坎中满兑上缺巽下断
</td>
</tr>
</table>


功夫panda
功夫panda
谢谢
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部