overflow

简写属性语法:

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

示例:

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号:画漫画的程序员,每天早上8点30分准时推送:前端前沿资讯、大厂面试题、程序员轶事、职场感悟等,一起进步!

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界