超出div隐藏 用一个css样式来解决
-
我是超管 2018-11-22 10:13 10:13
- 112
- 1
超出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实例代码
2、截图
内容过多超出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{:300px;:100px;:2px solid #00F;overflow:hidden}
</style>
</head>
<body>
<div class="yc">布局制作（网页标准重构）在于实践，不在于您看了多少教程，多少本CSS书籍。
当您跟随ThinkCSS内教程与技术文章亲自写代码实践，会对CSS学习有种全新学习认识。
有时您看别人代码一眼能看懂，自己却无从下手写CSS；有时不能理解的技术知识与问题</div>
</body>
</html>只对div盒子添加了overflow:hidden（隐藏超出的内容）样式
4、隐藏超出div后截图
隐藏超出div的内容
总结：
以上是div内放置文本内容，当然如果是图片或者div、p布局溢出超出这个div，依然很简单轻松设置一个overflow:hidden即可隐藏溢出超出。
0
收藏
点击回复
