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


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

 

一、是 td 的原因。

其實這關 td 什么事呢?div 也是一樣的,看示例:

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

並沒有直接截斷,而是出現了換行。所以跟 td 無關,而是受內容的影響。

二、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 沒關系,所以以上做法也是行不通的。

三、使用 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 的強制不換行及強制換行


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM