平時我們在網頁布局的時候總是有文字內容多了,超過溢出我們限制的高度,那麼就會有一些圖片會撐破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同時也可以下載需要的資源,
同時可以找到自己常見問題答案</div>
解決撐破內容方法
這樣設定了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="http://www.php.cn" /> </div>
所以,要想讓內容不超出對象設定寬度高度限定,那就使用overflow:hidden隱藏超出多餘部分即可。
溢出隱藏的小技巧就這麼多了,更多精彩請關注php中文網其它相關文章!
相關閱讀:
在HTML裡DIV怎麼使用
HTML5 <nav>標籤怎麼用
html文件類型聲明怎麼寫