overflow

  • 版本:CSS2/3
  • 媒体:视觉
overflow属性在CSS布局中是比较常用的,本文将带你深入理解overflow属性的各个方面,包括它的语法、取值、作用和浏览器兼容性,最后附上overflow的演示案例,希望能够对你有所帮助。

overflow的具体语法

overflow<overflow-style>

<overflow-style> = visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments

默认值visible

适用于:块容器,弹性盒容器,grid容器

继承性:无

动画性:否

计算值:指定值

overflow的取值介绍

visible:
对溢出内容不做处理,内容可能会超出容器。
hidden:
隐藏溢出容器的内容且不出现滚动条。
scroll:
隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。
auto:
当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的默认值。
paged-x:
TODO...(CSS3)
paged-y:
TODO...(CSS3)
paged-x-controls:
TODO...(CSS3)
paged-y-controls:
TODO...(CSS3)
fragments:
TODO...(CSS3)

overflow的使用说明

复合属性。检索或设置对象处理溢出内容的方式。参阅overflow-xoverflow-y属性
  • overflow的效果等同于overflow-x + overflow-y
  • 对于table来说,假如table-layout属性设置为fixed,则td对象支持带有默认值为hidden的overflow属性。如果设为hidden,scroll或者auto,那么超出td尺寸的内容将被剪切。如果设为visible,将导致额外的文本溢出到右边或左边(视direction属性设置而定)的单元格。
  • 对应的脚本特性为overflow

overflow的浏览器兼容性

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6.0-11.0 #1 1.0-25.0 #1 1.0-5.1.7 #1 1.0-31.0 #1 7.0-18.0 #1
  1. 不支持:paged-x | paged-y | paged-x-controls | paged-y-controls | fragments

overflow的完整演示案例

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册