视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
怎样隐藏溢出DIV的内容
2020-11-27 18:49:53 责编:小采
文档

平时我们在网页布局的时候总是有文字内容多了,超过溢出我们的高度,那么就会有一些图片会撑破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同时也可以下载需要的资源,

同时可以找到自己常见问题答案</div>

解决撑破内容方法

这样设置了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"> 
<img src="http://www.gxlcms.com" /> 
</div>

所以,要想让内容不超出对象设置宽度高度限定,那就使用overflow:hidden隐藏超出多余部分即可。

溢出隐藏的小技巧就这么多了,更多精彩请关注Gxl网其它相关文章!

相关阅读:

在HTML里DIV怎么使用

HTML5 <nav>标签怎么用

html文档类型声明怎么写

下载本文
显示全文
专题