溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么用css樣式解決超出div隱藏問題

發(fā)布時間：2022-03-02 15:20:47 來源：億速云 閱讀：592 作者：iii 欄目：web開發(fā)

本篇內(nèi)容介紹了“怎么用css樣式解決超出div隱藏問題”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

橫跨div的內(nèi)包庇藏——橫跨div的圖片竄伏——超出div的對象盒子隱藏，這幾個超出div的必要css竄伏圖謀門徑很簡單只須要設(shè)置裝備擺設(shè)一個css款式即可計劃。

CSS辦理花樣：overflow:hidden

overflow:hidden 屈就：不展示超越對象尺寸的模式，即暗藏趕過的模式。

無論是文字形式適量、圖片過寬過高、div過寬被撐破都能用overflow :hidden規(guī)畫超出跨越溢出標(biāo)題問題。

假設(shè)不想div形式溢出超出，只需求對其設(shè)置overflow :hidden即可。

場景先容：
好比div寬度是500px，而圖片寬度為600px，這個時辰一樣平常這個圖片將會撐破這個500px的div，就需求對這個div設(shè)置overflow :hidden便可輕松規(guī)劃，并潛伏超過跨過div部份，此時div也不會被撐破，將粗略展示500px寬度

1、會橫跨div實例代碼

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>潛藏越過div的形式 實例 css5.com.cn</title>
<style>
.yc{width:300px; height:100px; border:2px solid #00F}
</style>
</head>
<body>
<div class="yc">DIV CSS機(jī)關(guān)制作（網(wǎng)頁標(biāo)準(zhǔn)重構(gòu)）在于實際，不在于您看了多少教程，幾何本CSS冊本。
當(dāng)您隨從跟隨CSS5內(nèi)教程與技術(shù)手段文章切身寫代碼現(xiàn)實，會對CSS學(xué)習(xí)有種全新進(jìn)修明了。
無心您看外人代碼一眼能看懂，本人卻無從出手寫CSS；無意不能理解的技能常識與問題</div>
</body>
</html>

2、截圖

怎么用css樣式解決超出div隱藏問題
形式過量超出跨越div

為了看到溢出超出跨越div的成就，對div設(shè)置裝備擺設(shè)邊框格局，因為div配置寬度與高度限定，而文字模式過量（假設(shè)圖片過大一樣高出溢出），模式超出了div盒子。

3、加css overflow竄伏高出模式

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>埋伏超出跨越div的內(nèi)容 實例 css5.com.cn</title>
<style>
.yc{width:300px;height:100px;border:2px solid #00F;overflow:hidden}
</style>
</head>
<body>
<div class="yc">DIV CSS組織出產(chǎn)（網(wǎng)頁規(guī)范重構(gòu)）在于理論，不在于您看了多少教程，若干好多本CSS書籍。
當(dāng)您隨從跟隨CSS5內(nèi)教程與手藝文章切身寫代碼實際，會對CSS學(xué)習(xí)有種全新學(xué)習(xí)熟習(xí)。
有時您看別人代碼一眼能看懂，自身卻無從下手寫CSS；無心不克不及理解的技能常識與問題</div>
</body>
</html>

只對div盒子增多了overflow:hidden（潛藏超過跨過的形式）樣式

4、埋伏橫跨div后截圖

怎么用css樣式解決超出div隱藏問題
潛藏越過div的內(nèi)容

“怎么用css樣式解決超出div隱藏問題”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手