CSS overflow 属性

示例

显示不同的溢出属性值：

div.ex1 {
overflow: scroll;
}

div.ex2 {
overflow: hidden;
}

div.ex3 {
  overflow: auto;
}

div.ex4 {
  overflow: clip;
}

div.ex5 {
  overflow: visible;
}

亲自试一试 »

定义和用法

这个overflow属性指定如果内容溢出元素的框会发生什么。

此属性指定当元素的内容太大而无法容纳指定区域时是否剪切内容或添加滚动条。

笔记：这个overflow属性仅适用于具有指定高度的块元素。

展示演示❯

默认值：	可见的
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS2
JavaScript 语法：	对象.style.overflow="scroll"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
overflow	1.0	4.0	1.0	1.0	7.0

笔记：在 OS X Lion（Mac 上）中，滚动条默认隐藏，仅在使用时显示（即使设置了 "overflow:scroll"）。

CSS 语法

属性值

Value	Description	Demo
visible	The overflow is not clipped. It renders outside the element's box. This is default	Demo ❯
hidden	The overflow is clipped, and the rest of the content will be invisible. Content can be scrolled programmatically (e.g. by setting scrollLeft or scrollTo())	Demo ❯
clip	The overflow is clipped, and the rest of the content will be invisible. Forbids scrolling, including programmatic scrolling.	Demo ❯
scroll	The overflow is clipped, but a scroll-bar is added to see the rest of the content	Demo ❯
auto	If overflow is clipped, a scroll-bar should be added to see the rest of the content	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

码农教程 - 一技在手,衣食无忧!

CSS overflow 属性

示例

定义和用法

浏览器支持

CSS 语法

属性值

相关页面