溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹css中overflow:hidden有什么用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
上面我們已經說了overflow:hidden最簡單的作用就是溢出隱藏，下面我們來看一個具體示例：
<html>
<head>
<style type="text/css">
div
{
background-color:pink;
width:150px;
height:150px;
overflow: hidden;
}
</style>
</head>
<body>
<div>
愿中國青年都擺脫冷氣，只是向上走，不必聽自暴自棄者的話。
唯有民族魂是值得寶貴的，唯有它發揚起來，中國才有真進步。
愈艱難，就愈要做。改革，是向來沒有一帆風順的。
我們目下的當務之急是：一要生存，二要溫飽，三要發展。
必須敢于正視，這才可望敢想、敢說、敢做、敢當。
</div>
</body>
</html>效果如下：
從上面效果中可以很明顯的看出，文字超出的部分都看不到了，這其實就是overflow:hidden的溢出隱藏作用，那么，這些隱藏的部分是都沒有了嗎？當然不是，溢出隱藏的部分文字只是看不到了，但是實際還是存在的，如果你想要將隱藏的部分文字在你放上鼠標的時候顯現出來，這就需要用到css中的偽類部分的知識，下面我們來看看具體的代碼實例：
<html>
<head>
<style type="text/css">
div
{
background-color:pink;
width:150px;
height:150px;
overflow: hidden;
}
div:hover{
overflow: visible;
}
</style>
</head>
<body>
<div>
愿中國青年都擺脫冷氣，只是向上走，不必聽自暴自棄者的話。
唯有民族魂是值得寶貴的，唯有它發揚起來，中國才有真進步。
愈艱難，就愈要做。改革，是向來沒有一帆風順的。
我們目下的當務之急是：一要生存，二要溫飽，三要發展。
必須敢于正視，這才可望敢想、敢說、敢做、敢當。
</div>
</body>
</html>效果如下：
上圖的效果就是當鼠標放在文字上時，隱藏部分的文字就顯示出來了。我們可以看到代碼中多出了div:hover{overflow: visible;}，:hover就是css中偽類。
以上是css中overflow:hidden有什么用的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
