所謂省略就是把多餘的字以“...”顯示出來，而顯示則是當滑鼠移動到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:hover16 {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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
