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的效果。

CSS的overflow属性介绍的更多相关文章

  1. css 溢出overflow

    css 溢出overflow 当一个元素被设置为固定大小,在这个元素中的内容如果超出元素的界限,就会出现溢出的现象. 通常情况下我们可以通过overflow来控制这个属性. overflow语法定义 ...

  2. 深入理解CSS溢出overflow & overflow:hidden真的失效了吗[转载]

    深入理解CSS溢出overflow http://www.cnblogs.com/xiaohuochai/p/5289653.html overflow:hidden真的失效了吗 http://www ...

  3. css之overflow

    也说css之overflow:细探之下有意想不到的结果 2016-11-5 滴滴出行·DDFE 作者:dolymood overflow 是一个非常常用的 CSS 属性,一般来说会认为很简单,其实细究 ...

  4. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  5. 转：css中overflow:hidden 不起作用了吗？

    css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...

  6. CSS中overflow:scroll怎么设置只上下滚动而不左右滚动

    CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...

  7. 对CSS了解-overflow:hidden

    overflow:hidden 列出我在项目中,运用到此属性的例子: (1)暴力清除浮动 <style type="text/css"> .wrap {;backgro ...

  8. CSS 布局 - Overflow

    CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式. 这里的文本内容是可以滚动的,滚动条方向是垂直方向.dd马达价格 这里的文本内容是可以滚动的,滚动 ...

  9. 眼见为实 — CSS的overflow属性

    1. overflow属性 CSS的overflow属性指定当内容溢出一个元素的框,会发生什么.举个栗子: <!DOCTYPE html> <html> <head> ...

随机推荐

  1. 机器学习算法 --- Decision Trees Algorithms

    一.Decision Trees Agorithms的简介 决策树算法(Decision Trees Agorithms),是如今最流行的机器学习算法之一,它即能做分类又做回归(不像之前介绍的其他学习 ...

  2. go 运行项目

    此时运行项目,不能像之前简单的使用go run main.go,因为包main包含main.go和router.go的文件,因此需要运行go run *.go命令编译运行.如果是最终编译二进制项目,则 ...

  3. 笨办法学Python - 习题3: Numbers and Math

    目录 习题 3: 数字和数学计算 算术运算符 加分习题: 我的答案: 总结: 扩展: Python比较运算符 Python赋值运算符 Python位运算符 Python逻辑运算符 Python成员运算 ...

  4. tac命令详解

    基础命令学习目录首页 原文链接:http://blog.chinaunix.net/uid-128922-id-289974.html 有许多命令都可以查看文件,不同的命令有不同的优点,可以针对不同的 ...

  5. iOS 动态库、静态库 . framework 总结（2017.1.25 修改）

    修改于2017.1.25 使用Xcode Version 8.2.1 1.怎么创建.framework? 打开Xcode, 选择File ----> New ---> Project 选择 ...

  6. jQuery获取复选框选中的每一个值

    $('input[name="serviceMode"]:checked').each(function(){ this.attr('value') });

  7. xml命名空间

    https://yq.aliyun.com/articles/40353 ************************************* 摘要: 相信很多人和我一样,在编写Spring或者 ...

  8. SDPA: Toward a Stateful Data Plane in Software-Defined Networking

    文章名称:SDPA: Toward a Stateful Data Plane in Software-Defined Networking 发表时间:2017 期刊来源:IEEE/ACM Trans ...

  9. 怎样利用好单片机上的存储器资源来实现OD的存储与访问

    转自:http://www.cnblogs.com/winshton/p/4897789.html 我们知道OD(对象字典)是CANopen的核心,所有功能都是围绕它开展的,是协议栈的数据中心,良好的 ...

  10. 『编程题全队』Alpha 阶段冲刺博客集合

    『编程题全队』Alpha 阶段冲刺博客集合 »Day1 2018年4月19日 博客连接:『编程题全队』Alpha 阶段冲刺博客Day1 »Day2 2018年4月20日 博客连接:『编程题全队』Alp ...