CSS的overflow属性介绍

overflow 属性规定如何处理如何处理不符合元素框的内容。用法如下：Object.style.overflow=visible|hidden|scroll|auto。

参数介绍：

  • visible：内容不会被修剪，会呈现在元素框之外。
  • hidden：内容会被修剪，但是浏览器不会显示供查看内容的滚动条。
  • scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  • auto：由浏览器决定如何显示。如果需要，则显示滚动条。

本例使用 overflow 来显示溢出元素框的内容：

01 <html>
02 <head>
03 <style type="text/css">
04 div { border:thin solid green; width:100px; height:100px; }
05 </style>
06 <script type="text/javascript">
07 function hideOverflow()
08 {
09     document.getElementById("div1").style.overflow="hidden";
10 }
11 </script>
12 </head>
13 <body>
14 <div id="div1">
15 This is some text. This is some text. This is some text.
16 This is some text. This is some text. This is some text.
17 This is some text. This is some text. This is some text.
18 </div>
19 <br />
20 <input type="button" onclick="hideOverflow()"
21 value="Hide overflow" />
22 </body>
23 </html>

相信大家都碰到过一种情况：没有给父级div指定高度。希望他通过子级div的高度变化而自动适应。看似很简单，但日常应用中往往对子级div有更多要求，比如多重子级div、子级div左（右）浮动等等。这时就会碰到一种比较郁闷的情况：父级div无法随着子级div的高度增加而增加，发生”脱层”的现象。这种时候就需要用到”overflow: hidden;”这个属性了。表面意思来看他的作用是隐藏div层，而当我们给父级div应用这个属性的时候会发现它神奇的变得自适应了。

对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。

overflow:hidden---这样超出部分会自动隐藏，这样做不好的地方是就是这部分的信息显示不完全，比如图片只显示了一部分，但是页面布局不会乱。要注意的是，使用overflow的时候，一定要定义width，百分比或者具体值都可以。（在用ul和li做图片列表排列的时候，也可以用这个，这样避免一些大尺寸图搞乱布局，也可以解决浏览器窗口缩小时，li元素自动回行排列出错的问题）。用overflow:auto，还可以在页面里模仿出IFRAME的效果。

posted on 2014-12-02 17:25  复活的老羊  阅读(1488)  评论(0)  编辑  收藏  举报

导航