在佈局時，如果遇到內容超過盒子大小時，可以用CSS屬性Overflow將超出對象的內容實現隱藏，同時也可以將超出部分顯示或者隱藏滾動條的作用，接下來我們來了解學習css overflow樣式。
一、Overflow語法值
overflow : visible | auto | hidden | scroll
當然overflow可以單獨設定X（overflow-x ）和Y（overflow-y）方向的捲軸樣式其值與應用程式與overflow語法用法結構相同。
二、Overflow參數值解釋
visible : 不剪下內容也不新增捲軸。假如明確宣告此預設值，物件將被剪下為包含物件的window或frame的大小。且clip屬性設定將失效
auto : 此為body物件和textarea的預設值。在需要時剪下內容並新增捲軸，DIV預設值也是這個值，但需要設定時候設定即可
hidden : 不顯示超過物件尺寸的內容
scroll : 總是顯示捲軸
三、Overflow特別解釋說明
檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容。
設定textarea物件為hidden值將隱藏其捲軸。
對於table來說，假如table-layout屬性設定為fixed，則td物件支援帶有預設值為hidden的overflow屬性。如果設為hidden，scroll或auto，那麼超出td尺寸的內容將被剪切。如果設為visible，將導致額外的文字溢出到右邊或左邊（視direction屬性設定而定）的儲存格。自IE5開始，此屬性在MAC平台上可用。
四、重點學習Overflow
Overflow:visible 此樣式可以讓捲軸隱藏，但可以滑鼠上拉下拉滑動。
Overflow:hidden 隱藏物件超出設定寬度高度的內容
Overflow:scroll 此樣式，會讓內容無論是否超出高度寬度也會顯示捲軸。
五、Overflow:hidden與Overflow:scroll實踐
我們透過同樣的寬度高度設置，一個隱藏超出寬度高度內容，一個為顯示滾動條，為了案例演示，我們對案例2個物件加CSS border邊框。
CSS程式碼:
.divcss5-hidden,.divcss5-scroll{width:300px; height:100px;line-height:25px; border:1px solid #333}
.divcss5-hidden{overflow:hidden; height:50px}
.divcss5-scroll{overflow:scroll; margin-top:10px}html程式碼:
<div class="divcss5-hidden"> 隐藏超出的内容但不显示滚动,divcss5的overflow:hidden测试示范 案例，设置了高和宽后对象，内容多不超出对象 </div> <div class="divcss5-scroll"> <img src="http://www.divcss5.com/uploads/allimg/130219/1_130219231214_1.jpg" /> </div>
總結：Overflow css樣式我們常常用來隱藏於顯示捲軸，同時可以隱藏超出大小寬度高度顯示對象的內容，非常簡單如果不能拼寫此單字也無所謂，看到就能認識常用到地方，基本語法結構等借助於DW軟體快速輸入即可。
以上是深入理解CSS之overflow:hidden，scroll，visible的詳細內容。更多資訊請關注PHP中文網其他相關文章！
