在css的样式中overflow:hidden就是溢出隐藏的意思，顾名思义，overflow:hidden最直白的作用就是当元素内的内容溢出的时候使它隐藏溢出的部分，所以接下来这篇文章我们就来看看css中overflow:hidden的具体作用。
上面我们已经说了overflow:hidden最简单的作用就是溢出隐藏，下面我们来看一个具体示例：
div {background-color:pink;width:150px;height:150px;overflow: hidden;}愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者的话。唯有民族魂是值得宝贵的，唯有它发扬起来，中国才有真进步。愈艰难，就愈要做。改革，是向来没有一帆风顺的。我们目下的当务之急是：一要生存，二要温饱，三要发展。必须敢于正视，这才可望敢想、敢说、敢做、敢当。
效果如下：
立即学习“前端免费学习笔记（深入）”；
从上面效果中可以很明显的看出，文字超出的部分都看不到了，这其实就是overflow:hidden的溢出隐藏作用，那么，这些隐藏的部分是都没有了吗？当然不是，溢出隐藏的部分文字只是看不到了，但是实际还是存在的，如果你想要将隐藏的部分文字在你放上鼠标的时候显现出来，这就需要用到css中的伪类部分的知识，下面我们来看看具体的代码实例：
div {background-color:pink;width:150px;height:150px;overflow: hidden;}div:hover{ overflow: visible;}愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者的话。唯有民族魂是值得宝贵的，唯有它发扬起来，中国才有真进步。愈艰难，就愈要做。改革，是向来没有一帆风顺的。我们目下的当务之急是：一要生存，二要温饱，三要发展。必须敢于正视，这才可望敢想、敢说、敢做、敢当。
效果如下：
立即学习“前端免费学习笔记（深入）”；
上图的效果就是当鼠标放在文字上时，隐藏部分的文字就显示出来了。我们可以看到代码中多出了div:hover{overflow: visible;}，:hover就是css中伪类。
本篇文章到这里就全部结束了，更多其他精彩内容大家可以关注创想鸟相关栏目教程！！！
以上就是css中overflow:hidden的作用是什么？overflow:hidden的作用介绍的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1612828.html
微信扫一扫 
支付宝扫一扫 
