overflow 屬性說明:
版本：CSS2 相容性：IE4+ NS6+ 繼承性：無
文法：
overflow : visible | auto | hidden | scroll
相關參數說明如下：
visible:：不剪下內容也不添加捲軸。假如顯式聲明此預設值，對象將被剪下為包含對象的window或frame的大小。並且clip屬性設定將失效。
auto：此為body對象和textrea的預設值。在需要時剪下內容並添加捲軸
hidden：不顯示超過對象尺寸的內容。
scroll：總是顯示捲軸。
使用說明及要點：
◎ 檢索或設定當對象的內容超過其指定高度及寬度時如何管理內容。
◎ 設定textarea對象為hidden值將隱藏其捲軸。
◎ 對於table來說，假如table-layout屬性設定為fixed，則td對象支援帶有預設值為hidden的overflow屬性。如果設為hidden，scroll或者auto，那麼超出td尺寸的內容將被剪下。如果設為visible，將導致額外的文本溢出到◎ 右邊或左邊（視direction屬性設定而定）的儲存格。
◎ 自IE5開始，此屬性在MAC平台上可用。 對應的指令碼特性為overflow。
樣本：
body { overflow: hidden; }div { overflow: scroll; height: 100px; width: 100px; }
text-overflow版本：IE6+專有屬性 繼承性：無
div 溢出隱藏 div文字溢出用點(省略符號)代替
在div布局中內容溢出了容器，超出了容器所限定的寬度應該怎麼辦呢？很是疑惑，於是搜集整理一番，發現可以讓內容超出容器時超出部分顯示省略符號，這種做法不僅解決了問題，而且很美觀，好了，不多說了，有興趣的朋友可以參考下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh"> <head profile="http://www.w3.org/2000/08/w3c-synd/#"> <meta http-equiv="content-language" content="zh-cn" /> <meta http-equiv="content-type" content="text/html;charset=gb2312" /> <title>div中溢出文字用點代替的代碼</title> <style type="text/css"> /*<![CDATA[*/ li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } /*]]>*/ </style> </head> <body> <ul> <li><a href="#">web標準常見問題大全web標準常見問題大全</a></li> <li><a href="#">web標準常見問題大全web標準常見問題大全</a></li> <li><a href="#">web標準常見問題大全web標準常見問題大全</a></li> <li><a href="#">web標準常見問題大全web標準常見問題大全</a></li> <li><a href="#">web標準常見問題大全web標準常見問題大全</a></li> </body> </html>
TD也可以溢出隱藏顯示
或許我這篇文章一取這樣的名字，就會有人要問了：你怎麼還在關注table啊，那早就過時了…趕緊Xhtml…div好…ul好…ol好…dl好…完了，不知道還有什麼好了。
table真的過時了嗎？你真的瞭解table嗎？你真的會用table嗎？
打口水仗不是我們要做的，留給那些時間很充裕的人吧。
言歸正傳：
不記得是什麼時候，有人在用table類比DataGrid的時候說，為什麼td超出設定為固定寬度的文字不能隱藏，而是會直接換行呢？
是的，事實確實如此，如：
<style type="text/css">table {width:500px;;}.col1 {width:100px;}.col2 {width:200px;}.col3 {width:200px;}td {white-space:nowrap;overflow:hidden;}</style><table border="1" cellspacing="0" summary="回頭來看看Table：TD也玩overflow:hidden"><tr><td class="col1">神舟 優雅Q400N</td><td class="col2">優雅Q400N，採用Intel Core2 Duo(Merom) T5450(1.66G)處理器</td><td class="col3">迅馳4平台，突出的性價比，漂亮的外觀</td></tr></table>
運行如上代碼，你會發現儲存格裡超過固定寬度的文字不會被隱藏掉，而是換行顯示了，顯然，這並不是我的本意。
看起來，這似乎是table的一個特性，它不能很好的支援{width:*px;white-space:nowrap;overflow:hidden;}的組合，說到底就是white-space:nowrap這個東東沒起作用，所以看起來overflow:hidden就失效了。{註：如果是一連串的無意義字元則可生效，例如：<td class="col1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>，這個時候就不需要{white-space:nowrap}來強制它在一行內顯示，因為這一連串的a會被認定為是一個字而不發生換行，從而超出.col1寬度的a會被隱藏}
［解決方案一：］
後來有人提到使用百分比寬度就可以了，經測試，確實可以，稍微將第一段的其中幾行樣式修改一下，其它的不變：
.col1 {width:20%;}.col2 {width:40%;}.col3 {width:40%;}
將修改後的代碼運行後，會發現，超出寬度的文字果然被隱藏了，想要的效果似乎得到了。
事實上使用百分比寬度確實可以解決這個文字隱藏的問題，但這似乎並不是想要的最佳的解決方案，因為有的時候我們需要的是一個固定的寬度，而不是百分比寬度。
而這一切的根源就在於如何使得儲存格內的文字不換行在一行內顯示。
［解決方案二：］
要達到這個要求，除了使用樣式，我們也許還會想到一個許久不用了的標籤<nobr>，這個元素的作用就是強制內容在一行顯示。以上代碼做如下修改，其它則不變：
<table border="1" cellspacing="0" summary="回頭來看看Table：TD也玩overflow:hidden"><tr><td class="col1"><nobr>神舟 優雅Q400N</nobr></td><td class="col2"><nobr>優雅Q400N，採用Intel Core2 Duo(Merom) T5450(1.66G)處理器</nobr></td><td class="col3"><nobr>迅馳4平台，突出的性價比，漂亮的外觀</nobr></td></tr></table>
做了這個修改，會發現，效果確實達到，是不是該興奮呢？不，這似乎還不是最佳的解決方案，因為畢竟使用了一個許久不用且不推薦使用的元素標記，這多少讓人覺得有點不爽。
沿著這個思路，我換了一個角度來考慮這個問題，發現問題迎刃而解。
既然在固定寬度的儲存格內無法只簡單的給th,td加上white-space:nowrap，那麼我們在固定寬度的儲存格內再加一個標記元素呢？
最佳方案：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="gb2312" /><title>回頭來看看Table：TD也玩overflow:hidden</title><style type="text/css">table {width:500px;;}.col1 {width:100px;}.col2 {width:200px;}.col3 {width:200px;}th strong {display:block;width:100%;}tr strong,tr td {white-space:nowrap;overflow:hidden;}</style></head><body><table border="1" cellspacing="0" summary="測試"><thead><tr><th class="col1"><strong>產品名稱</strong></th><th class="col2"><strong>產品介紹</strong></th><th class="col3"><strong>產品備忘</strong></th></tr></thead><tbody><tr><td>神舟 優雅Q400N</td><td>優雅Q400N，2007年7月上市，採用Intel Core2 Duo(Merom) T5450(1.66G)處理器</td><td>迅馳4平台，突出的性價比，漂亮的外觀</td></tr></tbody></table></body></html>
運行上面的代碼，會發現這樣的做法是可以的，而且從代碼的簡潔性、可讀性和合理性幾方面來說，都較前幾種方案為好。
總結：
本文詳細介紹了CSS中溢出隱藏（overflow）的執行個體詳解，相信下夥伴麼可以進一步的瞭解！ 還沒有做過給儲存格隱藏超過固定寬度內容的同學，可先在機器上玩玩，然後再來看本文
相關推薦：
關於溢出隱藏的詳細介紹
分享文字溢出隱藏執行個體
溢出隱藏：最全的利用css解決內容溢出問題的幾種方案
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
