首頁 > web前端 > css教學 > 怎麼隱藏溢出DIV的內容

怎麼隱藏溢出DIV的內容

php中世界最好的语言
發布: 2017-11-23 14:17:32
原創
4842 人瀏覽過

平常我們在網頁版面的時候總是有文字內容多了,超過溢出我們限制的高度,那麼就會有一些圖片會撐破DIV,讓網頁錯位變亂的問題,那我們如何解決呢?

這我們就需要解決如何使用CSS來超出設定CSS寬度和CSS高度的內容自動隱藏掉,又不撐破DIV佈局。

特別是在IE6,如果內容超出物件高度和寬度承載,將會被撐破增高,這個時候我們可以利用以下解決方法。

解決CSS樣式 

這時我們可以使用CSS overflow樣式解決:

對應樣式overflow:hidden

Div{ overflow:hidden}

這樣設定後,假如DIV物件設定一定寬度高度,此時加入overflow:hidden將會隱藏超出DIV寬度高度的內容包含圖片。

相關閱讀:css實現溢出超出文字內容顯示省略號

#隱藏超出內容案例

1、隱藏超出物件寬度高度文字內容

#假如我們在一個佈局中為了美觀對齊,有時我們需要設定了物件高寬後就固定了,這個時候需要實現無論多少內容文字都不要超出設定寬度高度佈局,這個時候我們需要overflow:hidden幫忙。

CSS程式碼:

<style> 
.div{ width:300px; height:50px; line-height:25px; overflow:hidden} 
/* 设置对象高度宽度,同时设置overflow:hidden */ 
</style>
登入後複製
登入後複製

Html程式碼:

<div class="div">欢迎,
登入後複製

在這裡你可以學習CSS同時也可以下載需要的資源, 

同時可以找到自己常見問題答案

 

解決撐破內容方法

這樣設定了overflow:hidden無論多少內容都會隱藏物件設定寬度和高度以外裝不下的內容。

這裡設定一個一定CSS寬度和CSS高度的物件盒子,放一個大的圖片,然後使用overflow:hidden隱藏其超出部分。

Css程式碼

<style> 
.div{ width:300px; height:50px; line-height:25px; overflow:hidden} 
/* 设置对象高度宽度,同时设置overflow:hidden */ 
</style>
登入後複製
登入後複製

Html程式碼

<div class="div"> 
<img src="//m.sbmmt.com" /> 
</div>
登入後複製

所以,要讓內容不超出物件設定寬度高度限定,那就使用overflow:hidden隱藏超出多餘部分即可。

溢出隱藏的小技巧就這麼多了,更多精彩請關注php中文網其它相關文章!

相關閱讀:

在HTML裡DIV怎麼使用

HTML5

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板