css中overflow:hidden的作用是什么？overflow:hidden的作用介绍-css教程-PHP中文网

首页

web前端

css教程

css中overflow:hidden的作用是什么？overflow:hidden的作用介绍

不言

Oct 29, 2018 am 11:16 AM

在css的样式中overflow:hidden就是溢出隐藏的意思，顾名思义，overflow:hidden最直白的作用就是当元素内的内容溢出的时候使它隐藏溢出的部分，所以接下来这篇文章我们就来看看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>

效果如下：

2345截图20181029105352.png

从上面效果中可以很明显的看出，文字超出的部分都看不到了，这其实就是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>

效果如下：

2345截图20181029110333.png