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怎么設置滾動條

怎樣使用CSS讓DIV居中顯示

設置DIV滾動條屬性與樣式的方式介紹

以上就是怎樣隱藏溢出DIV邊框的內容的詳細內容，更多請關注php中文網其它相關文章！