所謂省略就是把多余的字以“...”顯示出來，而顯示則是當鼠標移動到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