您的位置:首页 > CSS技巧 > 【 返回上一页

超出div隐藏 用一个css样式来解决

超出div的内容隐藏——超出div的图片隐藏——超出div的对象盒子隐藏,这几个超出div的需要css隐藏解决方法很简单只需要设置一个css样式即可解决。

CSS解决样式:overflow:hidden

overflow:hidden 功能:不显示超过对象尺寸的内容,即隐藏超出的内容。

无论是文字内容过多、图片过宽过高、div过宽被撑破都能用overflow :hidden解决超出溢出问题。

如果不想div内容溢出超出,只需要对其设置overflow :hidden即可。

场景介绍:
比如div宽度是500px,而图片宽度为600px,这个时候通常这个图片将会撑破这个500px的div,就需要对这个div设置overflow :hidden即可轻松解决,并隐藏超出div部分,此时div也不会被撑破,将准确显示500px宽度

1、会超出div实例代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隐藏超出div的内容 实例 www.thinkcss.com</title>
<style>
.yc{width:300px; height:100px; border:2px solid #00F}
</style>
</head>
<body>
<div class="yc">DIV CSS布局制作(网页标准重构)在于实践,不在于您看了多少教程,多少本CSS书籍。 当您跟随ThinkCSS内教程与技术文章亲自写代码实践,会对CSS学习有种全新学习认识。 有时您看别人代码一眼能看懂,自己却无从下手写CSS;有时不能理解的技术知识与问题</div>
</body>
</html>

2、截图

内容过多超出div
内容过多超出div

为了看到溢出超出div的效果,对div设置边框样式,由于div设置宽度和高度限制,而文字内容过多(如果图片过大一样超出溢出),内容超出了div盒子

3、加css overflow隐藏超出内容

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隐藏超出div的内容 实例 www.thinkcss.com</title>
<style>
.yc{width:300px;height:100px;border:2px solid #00F;overflow:hidden}
</style>
</head>
<body>
<div class="yc">DIV CSS布局制作(网页标准重构)在于实践,不在于您看了多少教程,多少本CSS书籍。 当您跟随ThinkCSS内教程与技术文章亲自写代码实践,会对CSS学习有种全新学习认识。 有时您看别人代码一眼能看懂,自己却无从下手写CSS;有时不能理解的技术知识与问题</div>
</body>
</html>

只对div盒子添加了overflow:hidden(隐藏超出的内容)样式

4、隐藏超出div后截图

隐藏超出div的内容
隐藏超出div的内容

总结:
以上是div内放置文本内容,当然如果是图片或者div、p布局溢出超出这个div,依然很简单轻松设置一个overflow:hidden即可隐藏溢出超出。

相关标签: 隐藏 溢出 超出
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/jiqiao/1442.shtml

日期:2017-10-03 11:09:34 来源:css学习与资料网 作者:thinkcss原创

热门点击