overflow

  • 版本:CSS2/3
  • 2018.3.6

简写属性语法:

overflowvisible | 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-xoverflow-y)值为非 visibile时,将会为它的内容创建一个新的块格式化上下文(BFC)。
  • 对于table元素来说,假如其table-layout属性设置为fixed,则tdth元素支持将overflow设为hiddenscrollauto,此时超出单元格尺寸的内容将被剪切。如果设为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

示例:

关注编程学问公众号