平常我們佈局的時候，有時內容超過了我們DIV邊框限制的寬高，這樣就會讓網頁錯位變亂，特別的不美觀，用戶體驗度極差，我們需要怎麼樣來隱藏溢出DIV邊框的內容呢？今天就帶給大家這一份教學。
CSS樣式實現溢出超出DIV邊框寬度高度的內容自動隱藏方法
平常我們佈局時候，有的文字內容多了會超過溢出我們限制的高度，有的圖片會撐破DIV，讓網頁錯位變亂。
這樣我們就需要解決如何使用CSS來超出設定CSS寬度和CSS高度的內容自動隱藏掉，又不撐破DIV佈局。
特別是在IE6，如果內容超出物件高度和寬度承載，將會被撐破增高，這個時候我們可以利用以下解決方法。
一、解決CSS樣式
這時我們可以使用CSS overflow樣式解決：
對應樣式overflow:hidden
Div{overflow:hidden}這樣設定後，如果DIV物件設定一定寬度高度，此時加入overflow:hidden將會隱藏超出DIV寬度高度的內容包含圖片。
相關閱讀：css實作溢位超出文字內容顯示省略號
二、隱藏超出內容案例
1、隱藏超出物件寬度高度文字內容
假如我們在一個佈局中為了美觀對齊，有時我們需要設定了物件高寬後就固定了，這個時候需要實現無論多少內容文字都不要超出設定寬度高度佈局，這個時候我們需要overflow:hidden幫忙。
CSS程式碼：
<style>
.pcss5{ width:300px; height:50px; line-height:25px; overflow:hidden}
/* 设置对象高度宽度，同时设置overflow:hidden */
</style>
Html代码：<p class="pcss5">欢迎， </p>
這樣設定了overflow:hidden無論多少內容都會隱藏物件設定寬度和高度以外裝不下的內容。
2、隱藏超出物件寬度的圖片部分案例
這裡設定一個一定CSS寬度和CSS高度的物件盒子，放一個大的圖片，然後使用overflow:hidden隱藏其超出部分。
Css程式碼
<style>
.pcss5{ width:300px; height:50px; line-height:25px; overflow:hidden}
/* 设置对象高度宽度，同时设置overflow:hidden */
</style>Html程式碼
<p class="pcss5"> <img src="http://www.php.cn" /> </p>
#設定寬度和高度，雖然圖片大
總結一下，如果想讓內容不超出物件設定寬度高度限定，那麼只需要用overflow:hidden來隱藏超出多餘部分即可。
相關閱讀：
以上是怎麼隱藏溢出DIV邊框的內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！
