怎样隐藏溢出DIV边框的内容
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱。
这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉,又不撑破DIV布局。
特别是在IE6,如果内容超出对象高度和宽度承载,将会被撑破增高,这个时候我们可以利用以下解决方法。
一、解决CSS样式
这时我们可以使用CSS overflow样式解决:
对应样式overflow:hidden
Div{overflow:hidden}
这样设置后,假如DIV对象设置一定宽度高度,此时加入overflow:hidden将会隐藏超出DIV宽度高度的内容包括图片。
相关阅读:css实现溢出超出文字内容显示省略号
二、隐藏超出内容案例
1、隐藏超出对象宽度高度文字内容
假如我们在一个布局中为了美观对齐,有时我们需要设置了对象高宽后就固定了,这个时候需要实现无论多少内容文字都不要超出设置宽度高度布局,这个时候我们需要overflow:hidden帮忙。
CSS代码:
<style> .pcss5{ width:300px; height:50px; line-height:25px; overflow:hidden} /* 设置对象高度宽度,同时设置overflow:hidden */ </style> Html代码:
<p class="pcss5">欢迎, </p>
这样设置了overflow:hidden无论多少内容都会隐藏对象设置宽度和高度以外装不下的内容。
2、隐藏超出对象宽度的图片部分案例
这里设置一个一定CSS宽度和CSS高度的对象盒子,放一个大的图片,然后使用overflow:hidden隐藏其超出部分。
Css代码
<style> .pcss5{ width:300px; height:50px; line-height:25px; overflow:hidden} /* 设置对象高度宽度,同时设置overflow:hidden */ </style>
Html代码
<p class="pcss5"> <img src="http://www.php.cn" /> </p>
设置宽度和高度,虽然图片大
总结一下,如果想让内容不超出对象设置宽度高度限定,那么只需要用overflow:hidden来隐藏超出多余部分即可。
相关阅读:
以上就是怎样隐藏溢出DIV边框的内容的详细内容,更多请关注其它相关文章!
下一篇: 使PHP自定义函数返回多个值
推荐阅读
-
div中文字内容溢出常见的解决方法
-
js按类名隐藏div之间的内容
-
css+div如何解决内容的溢出_html/css_WEB-ITnose
-
.net开发微博 怎样能div 随着内容的大小而改变div的大小_html/css_WEB-ITnose
-
.net开发微博 怎样能div 随着内容的大小而改变div的大小_html/css_WEB-ITnose
-
div中文字内容溢出常见的解决方法
-
已知overflow生效隐藏溢出内容,如何将隐藏了一半没全隐藏的内容隐藏掉····_html/css_WEB-ITnose
-
html 隐藏div HTML里隐藏表格TABLE或者DIV内容的css样式_HTML/Xhtml_网页制作
-
怎样用CSS隐藏图片背景的文字内容
-
已知overflow生效隐藏溢出内容,如何将隐藏了一半没全隐藏的内容隐藏掉····_html/css_WEB-ITnose