平时我们在网页布局的时候总是有文字内容多了，超过溢出我们限制的高度，那么就会有一些图片会撑破div，让网页错位变乱的问题，那我们如何解决呢？
这我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉，又不撑破DIV布局。
特别是在IE6，如果内容超出对象高度和宽度承载，将会被撑破增高，这个时候我们可以利用以下解决方法。
解决CSS样式
这时我们可以使用CSS overflow样式解决：
对应样式overflow:hidden
Div{overflow:hidden}
这样设置后，假如DIV对象设置一定宽度高度，此时加入overflow:hidden将会隐藏超出DIV宽度高度的内容包括图片。
相关阅读：css实现溢出超出文字内容显示省略号
隐藏超出内容案例
1、隐藏超出对象宽度高度文字内容
假如我们在一个布局中为了美观对齐，有时我们需要设置了对象高宽后就固定了，这个时候需要实现无论多少内容文字都不要超出设置宽度高度布局，这个时候我们需要overflow:hidden帮忙。
CSS代码：
<style>
.div{ width:300px; height:50px; line-height:25px; overflow:hidden}
/* 设置对象高度宽度，同时设置overflow:hidden */
</style>Html代码：
<div class="div">欢迎，
在这里你可以学习CSS同时也可以下载需要的资源，
同时可以找到自己常见问题答案
解决撑破内容方法
这样设置了overflow:hidden无论多少内容都会隐藏对象设置宽度和高度以外装不下的内容。
这里设置一个一定CSS宽度和CSS高度的对象盒子，放一个大的图片，然后使用overflow:hidden隐藏其超出部分。
Css代码
<style>
.div{ width:300px; height:50px; line-height:25px; overflow:hidden}
/* 设置对象高度宽度，同时设置overflow:hidden */
</style>Html代码
<div class="div"> @@##@@ </div>
所以，要想让内容不超出对象设置宽度高度限定，那就使用overflow:hidden隐藏超出多余部分即可。
溢出隐藏的小技巧就这么多了，更多精彩请关注php中文网其它相关文章！
相关阅读：
以上就是怎样隐藏溢出DIV的内容的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
164
