[轉]對 td 使用 overflow:hidden; 無效的幾點錯誤認識

轉載：http://www.cftea.com/c/2010/12/UVBUCD0J888L2XPQ.asp

 

1、是 td 的緣由。

其實這關 td 什麼事呢？div 也是同樣的，看示例：

<div style="width:100px;overflow:hidden;">中華人民共和國中華人民共和國</div>

並無直接截斷，而是出現了換行。因此跟 td 無關，而是受內容的影響。

2、td 中多套一層標籤（好比 div），table 指定 table-layout:fixed。

<table style="table-layout:fixed;">   <tr>     <td style="width:100px;overflow:hidden;white-space:nowrap;"><div>中華人民共和國中華人民共和國</div></td>   </tr>   <tr>     <td>中華人民共和國中華人民共和國</td>   </tr> </table>

前面說了，這個 overflow 跟內容有關，而跟是否是 td 不要緊，因此以上作法也是行不通的。

3、使用 white-space:pre;。

這個是錯誤的，輸出內容會照源碼輸出，好比源碼中「中」和「國」之間換行了，但沒有任何標籤，那麼輸出時也會顯示在兩行，而 HTML 中，默認 <br /> 纔會換行，與實際需求不符。

正確的作法

CSS 代碼

div{ width:100px;overflow:hidden;white-space:nowrap;} td{width:100px;overflow:hidden;white-space:nowrap;word-break:keep-all;}

HTML 代碼

<div>中華人民共和國中華人民共和國</div> <table>   <tr>     <td><div>中華人民共和國中華人民共和國</div></td>   </tr>   <tr>     <td>中華人民共和國中華人民共和國</td>   </tr> </table>

所有 OK。能夠看出 td 比 div 多一個 word-break:keep-all;。這是因爲 IE 中，對 td 的解釋與 Firefox、Chrome 的不一樣，若不加的話，IE 中第三行仍然會轉到下一行，而不是截斷。具體請參見兼容多瀏覽器，兼容 div、p、td 的強制不換行及強制換行。