CSS3 overflow-xProperty
Example
If it overflows the element's content area - clips the left/right edge content of the div element:
div
{
overflow-x:hidden;
}
{
overflow-x:hidden;
}
Try it Yourself »
Browser Support
The numbers in the table indicate the first browser version number that supports the property.
The number immediately preceding -webkit-, -ms-, or -moz- is the first browser version number that supports the prefixed property.
| Property | |||||
|---|---|---|---|---|---|
| overflow-x | 4.0 | 9.0 8.0 -ms- |
3.5 | 3.0 | 9.5 |
Property definition and usage instructions
The overflow-x property specifies whether to clip the left/right edge content if it overflows the element's content area.
Tip:Use the overflow-y property to determine whether the top and bottom edges are clipped.
| Default value: | visible |
|---|---|
| Inherited: | no |
| version: | CSS3 |
| JavaScript Syntax: | object.style.overflowX="scroll" |
Syntax
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
| Value | Description |
|---|---|
| visible | Content is not clipped, and may be displayed outside the content box. |
| hidden | Content is clipped - no scrolling mechanism is provided. |
| scroll | Clipped content - provides a scrolling mechanism. |
| auto | If the box overflows, a scrolling mechanism should be provided. |
| no-display | If the content does not fit the content box, the entire box is removed. |
| no-content | If the content does not fit the content box, the entire content is hidden. |