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
外
媒 体:视觉
textarea
元素的overflow
默认值就是auto
。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;
}
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 |