上面我们已经说了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中伪类。
本篇文章到这里就全部结束了,更多其他精彩内容大家可以关注php中文网相关栏目教程!!!
以上就是css中overflow:hidden的作用是什么?overflow:hidden的作用介绍的详细内容,更多请关注php中文网其它相关文章!
……