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 的強制不換行及強制換行。