如何隱藏溢出DIV邊框的內(nèi)容

CSS樣式實(shí)現(xiàn)溢出超出DIV邊框?qū)挾雀叨鹊膬?nèi)容自動(dòng)隱藏方法

平時(shí)我們布局時(shí)候，有的文字內(nèi)容多了會(huì)超過(guò)溢出我們限制的高度，有的圖片會(huì)撐破DIV，讓網(wǎng)頁(yè)錯(cuò)位變亂。

這樣我們就需要解決如何使用CSS來(lái)超出設(shè)置CSS寬度和CSS高度的內(nèi)容自動(dòng)隱藏掉，又不撐破DIV布局。

特別是在IE6，如果內(nèi)容超出對(duì)象高度和寬度承載，將會(huì)被撐破增高，這個(gè)時(shí)候我們可以利用以下解決方法。

一、解決CSS樣式

這時(shí)我們可以使用CSS overflow樣式解決：

對(duì)應(yīng)樣式overflow:hidden

Div{overflow:hidden}

這樣設(shè)置后，假如DIV對(duì)象設(shè)置一定寬度高度，此時(shí)加入overflow:hidden將會(huì)隱藏超出DIV寬度高度的內(nèi)容包括圖片。

相關(guān)閱讀：css實(shí)現(xiàn)溢出超出文字內(nèi)容顯示省略號(hào)

二、隱藏超出內(nèi)容案例

1、隱藏超出對(duì)象寬度高度文字內(nèi)容

假如我們?cè)谝粋�(gè)布局中為了美觀對(duì)齊，有時(shí)我們需要設(shè)置了對(duì)象高寬后就固定了，這個(gè)時(shí)候需要實(shí)現(xiàn)無(wú)論多少內(nèi)容文字都不要超出設(shè)置寬度高度布局，這個(gè)時(shí)候我們需要overflow:hidden幫忙。

CSS代碼：

<style> 
.pcss5{ width:300px; height:50px; line-height:25px; overflow:hidden} 
/* 設(shè)置對(duì)象高度寬度，同時(shí)設(shè)置overflow:hidden */ 
</style> 
Html代碼：

<p class="pcss5">歡迎，
</p>

這樣設(shè)置了overflow:hidden無(wú)論多少內(nèi)容都會(huì)隱藏對(duì)象設(shè)置寬度和高度以外裝不下的內(nèi)容。

2、隱藏超出對(duì)象寬度的圖片部分案例

這里設(shè)置一個(gè)一定CSS寬度和CSS高度的對(duì)象盒子，放一個(gè)大的圖片，然后使用overflow:hidden隱藏其超出部分。

Css代碼

<style> 
.pcss5{ width:300px; height:50px; line-height:25px; overflow:hidden} 
/* 設(shè)置對(duì)象高度寬度，同時(shí)設(shè)置overflow:hidden */ 
</style>

Html代碼

<p class="pcss5"> 
<img src="http://www.php.cn" /> 
</p>

設(shè)置寬度和高度，雖然圖片大

總結(jié)一下，如果想讓內(nèi)容不超出對(duì)象設(shè)置寬度高度限定，那么只需要用overflow:hidden來(lái)隱藏超出多余部分即可。

相關(guān)閱讀：

DIV怎么設(shè)置滾動(dòng)條

怎樣使用CSS讓DIV居中顯示

設(shè)置DIV滾動(dòng)條屬性與樣式的方式介紹

以上就是怎樣隱藏溢出DIV邊框的內(nèi)容的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！