CSS实现table td中文字的省略与显示

　　所谓省略就是把多余的字以“...”显示出来，而显示则是当鼠标移动到td上时，把省略的字重新显示出来。对于一个table，兼容IE与FF、Chrome的省略方式CSS写法：

 1 table{
 2     width:200px;
 3     table-layout: fixed;
 4 }
 5 .autocut{
 6     overflow:hidden;
 7     white-space:nowrap;
 8     text-overflow:ellipsis;
 9     -o-text-overflow:ellipsis;
10     -icab-text-overflow: ellipsis;
11     -khtml-text-overflow: ellipsis;
12     -moz-text-overflow: ellipsis;
13     -webkit-text-overflow: ellipsis;
14 }
15 .autocut:hover
16 {
17     overflow:visible;
18     white-space:normal;
19     word-wrap: break-word;
20 }

　　使用时，把autocut赋给td的clss类，即可：

 1 <table>  
 2     <thead>  
 3         <tr>  
 4             <th>Column1</th>  
 5             <th>Column2</th>  
 6         </tr>  
 7     </thead>  
 8     <tbody>  
 9         <tr>  
10             <td>Column1</td>  
11             <td class="autocut">
12         自动剪裁吧！自动剪裁吧！
13         </td> 
14         </tr>
15     </tbody>
16 </table>

　　特别需要注意的是，在HTML文件一定要加上这句声明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　否则IE就不起作用啦，当然，由于IE6对hover的支持只到a标签，所以IE6就不能这样通过css来显示了（可以给td内部加上a标签，然后设置其css，或者通过js来处理事件），效果图：

　　

　　转载请注明原址：http://www.cnblogs.com/lekko/archive/2013/04/30/3051638.html

posted @ 2013-04-30 10:18  Lekko.Li  阅读(4968)  评论(2)  编辑  收藏  举报