CSS/Properties/overflow
From W3C Wiki
< CSS | Properties
Contents |
overflow
The overflow property specifies whether content of a block container element is clipped when it overflows the element's box.
Description
| Values | visible | hidden | scroll | auto | inherit |
|---|---|
| Initial value | visible |
| Applies to | non-replaced block-level elements, table cells, inline-table, and inline-block elements |
| Inherited | No |
Values
visible
The content is not clipped.
hidden
The content is clipped and no scrollbars are provided.
scroll
The content is clipped and scrollbars are provided.
auto
The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.
inherit
Takes the same specified value as the property for the element's parent.
Example
Example A
[style.css]
h2{
font-size: 1.0em;
}
section{
width: 10em;
float: left;
}
p{
width: 5em;
height: 5em;
border-width: 1px;
border-style: dotted;
}
#hid{
overflow: hidden;
}
#sc{
overflow: scroll;
}
#au{
overflow: auto;
}
[index.html]
<body>
<h1>overflow exapmle</h1>
<section>
<h2>overflow: hidden;</h2>
<p id="hid">The overflow property specifies whether content
of a block container element is clipped when it overflows the element's box. </p>
</section>
<section>
<h2>overflow: scroll;</h2>
<p id="sc">The overflow property specifies whether content
of a block container element is clipped when it overflows the element's box. </p>
</section>
<section>
<h2>overflow: auto;</h2>
<p id="au">The overflow property specifies whether content
of a block container element is clipped when it overflows the element's box. </p>
</section>
</body>
CSS Reference
The CSS specification defines the overflow property in 11.1.1 Overflow.
