您好,登錄后才能下訂單哦!
這篇文章主要介紹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進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。