平时我们布局的时候，有时内容超过了我们div边框限制的宽高，这样就会让网页错位变乱，特别的不美观，用户体验度极差，我们需要怎么样来隐藏溢出div边框的内容呢？今天就给大家带来这一份教程。
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
平时我们布局时候，有的文字内容多了会超过溢出我们限制的高度，有的图片会撑破DIV，让网页错位变乱。
这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉，又不撑破DIV布局。
特别是在IE6，如果内容超出图片高度和宽度承载，将会被撑破增高，这个时候我们可以利用以下解决方法。
一、解决CSS样式
这时我们可以使用CSS 图片样式解决：
对应样式overflow:hidden
Div{overflow:hidden}
登录后复制
这样设置后，假如DIV对象设置一定宽度高度，此时加入overflow:hidden将会隐藏超出DIV宽度高度的内容包括图片。
相关阅读：css实现溢出超出文字内容显示省略号
二、隐藏超出内容案例
1、隐藏超出对象宽度高度文字内容
假如我们在一个布局中为了美观对齐，有时我们需要设置了对象高宽后就固定了，这个时候需要实现无论多少内容文字都不要超出设置宽度高度布局，这个时候我们需要overflow:hidden帮忙。
CSS代码：
.pcss5{ width:300px; height:50px; line-height:25px; overflow:hidden} /* 设置对象高度宽度，同时设置overflow:hidden */ Html代码：
登录后复制
欢迎，
登录后复制
这样设置了overflow:hidden无论多少内容都会隐藏对象设置宽度和高度以外装不下的内容。
2、隐藏超出对象宽度的图片部分案例
这里设置一个一定CSS宽度和CSS高度的对象盒子，放一个大的图片，然后使用overflow:hidden隐藏其超出部分。
Css代码
.pcss5{ width:300px; height:50px; line-height:25px; overflow:hidden} /* 设置对象高度宽度，同时设置overflow:hidden */
登录后复制
Html代码
@@##@@
登录后复制
设置宽度和高度，虽然图片大
总结一下，如果想让内容不超出对象设置宽度高度限定，那么只需要用overflow:hidden来隐藏超出多余部分即可。
相关阅读：
图片
图片
图片
以上就是怎样隐藏溢出DIV边框的内容的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3194877.html
