所谓省略就是把多余的字以“...”显示出来，而显示则是当鼠标移动到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