overflow
Description
overflow defines what to do during overflow.
| Item | Value |
|---|---|
| Initial value | visible |
| Inherited | No. |
| Version | CSS2 |
| JavaScript syntax | object.style.overflow="scroll" |
| Applies to | Block-level and replaced elements. |
Syntax and Property Values
overflow: auto | hidden | scroll | visible | inherit
The property values are listed in the following table.
| Value | Description |
|---|---|
| visible | Default value. The overflow is visible and not clipped. |
| hidden | Clip the overflow and hide the overflowed content |
| scroll | Clip the overflow and add scroll-bar to make the overflowed content visible |
| auto | Clip the overflow and add scroll-bar to make the overflowed content visible |
| inherit | Inherit the overflow property from the parent element |
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
p {<!--from ww w.java 2 s .c om-->
padding: 10px;
margin: 10px;
border: thin solid black;
width: 150px;
height: 150px;
overflow: auto;
}
</style>
</head>
<body>
<p>
P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
</p>
</body>
</html>
The code above generates the following result.
