Rumah > hujung hadapan web > tutorial css > 怎样隐藏溢出DIV的内容

怎样隐藏溢出DIV的内容

php中世界最好的语言
Lepaskan: 2017-11-23 14:17:32
asal
4842 orang telah melayarinya

平时我们在网页布局的时候总是有文字内容多了,超过溢出我们限制的高度,那么就会有一些图片会撑破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>
Salin selepas log masuk
Salin selepas log masuk

Html代码:

<div class="div">欢迎,
Salin selepas log masuk

在这里你可以学习CSS同时也可以下载需要的资源,

同时可以找到自己常见问题答案

解决撑破内容方法

这样设置了overflow:hidden无论多少内容都会隐藏对象设置宽度和高度以外装不下的内容。

这里设置一个一定CSS宽度和CSS高度的对象盒子,放一个大的图片,然后使用overflow:hidden隐藏其超出部分。

Css代码

<style> 
.div{ width:300px; height:50px; line-height:25px; overflow:hidden} 
/* 设置对象高度宽度,同时设置overflow:hidden */ 
</style>
Salin selepas log masuk
Salin selepas log masuk

Html代码

<div class="div"> 
<img src="//m.sbmmt.com" /> 
</div>
Salin selepas log masuk

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

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

相关阅读:

在HTML里DIV怎么使用

HTML5

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Cadangan popular
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan