overflow
- 版本:CSS2/3
- 2018.3.6
简写属性语法:
overflow:visible | hidden | scroll | auto | clip
默认值:看每个独立属性
适用于:块容器,伸缩盒容器,grid容器
继承性:无
动画性:否
计算值:看每个独立属性
媒 体:视觉
分拆独立属性语法:
overflow-*:visible | hidden | scroll | auto | clip
overflow-* = overflow-x
,overflow-y
默认值:visible
适用于:块容器,伸缩盒容器,grid容器
继承性:无
动画性:否
计算值:指定值,除了当overflow-x
,overflow-y
之一设置为非 visible
时另一个属性会自动将默认值visible
计算为auto
外
媒 体:视觉
取值:
- visible:
- 对溢出内容不做处理,内容可能会超出容器。
- hidden:
- 隐藏溢出容器的内容且不出现滚动条。
- scroll:
- 隐藏溢出容器的内容,溢出的内容可以通过滚动呈现。
- auto:
- 当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。
textarea
元素的overflow
默认值就是auto
。 - clip:
- 与
hidden
一样,clip
也被用来隐藏溢出容器的内容且不出现滚动条。不同的地方在于,clip
是一个完全禁止滚动的容器,而hidden
仍然可以通过编程机制让内容可以滚动。
说明:
定义了元素处理溢出内容的方式。
-
overflow
的效果等同于overflow-x
+overflow-y
。举个例子:
.demo { overflow: hidden; } 等同于: .demo { overflow-x: hidden; oveflow-y: hidden; } - 当块级元素定义了
overflow
属性(包括overflow-x
与overflow-y
)值为非 visibile
时,将会为它的内容创建一个新的块格式化上下文(BFC)。 - 对于
table
元素来说,假如其table-layout属性设置为fixed
,则td
、th
元素支持将overflow
设为hidden
、scroll
或auto
,此时超出单元格尺寸的内容将被剪切。如果设为visible
,将导致额外的文本溢出到右边或左边(视direction属性设置而定)的单元格。 overflow-x
属性用于指定元素水平方向上的内容溢出时的处理方式,overflow-y
属性用于指定元素垂直方向上的内容溢出时的处理方式。-
当
overflow-x
,overflow-y
中任意一个属性值的定义为非 visible
时,另一个属性会自动将默认值visible
计算为auto
。举个例子:
.demo { overflow-x: hidden; } 等同于: .demo { overflow-x: hidden; oveflow-y: auto; } - 对应的脚本特性分别为:overflow, overflowX, overflowY。
兼容性:
- 浅绿 = 支持
- 红色 = 不支持
- 粉色 = 部分支持
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome Basic Support 8.0+ 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+ clip 16.0 58.0 64.0 11.0 50.0 11.0 62.0 64.0 示例:
相关文章
css appendix indexcss thank you for the contribute of css manualcss background clipcss border stylecss max heightcss css flexible box layout module indexcss font stylecss overflowcss list stylecss column break aftercss only ie indexcss webkit overflow scrollingcss webkit user dragcss border collapsecss word wrap/overflow wrapcss text transformcss perspectivecss nav indexcss text overflowcss unicode bidi