CSS Reference
CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX CSS3 Browser SupportCSS Properties
CSS3 overflow-x Property
Example
Clip the left/right edges of the content inside the div element - if it overflows the element's content area:
div
{
overflow-x:hidden;
}
{
overflow-x:hidden;
}
Try it yourself »
Browser Support
The overflow-x property is supported in all of the major browsers.
Note: The overflow-x property does not work properly in IE8 and earlier.
Definition and Usage
The overflow-x property specifies whether or not to clip the left/right edges of the content - if it overflows the element's content area.
Tip: Use the overflow-y property to determine clipping at the top and bottom edges.
| 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 | Play it |
|---|---|---|
| visible | The content is not clipped, and it may be rendered outside the content box | Play it » |
| hidden | The content is clipped - and no scrolling mechanism is provided | Play it » |
| scroll | The content is clipped and a scrolling mechanism is provided | Play it » |
| auto | Should cause a scrolling mechanism to be provided for overflowing boxes | Play it » |
| no-display | If the content does not fit in the content box, the whole box is removed | Play it » |
| no-content | If the content does not fit in the content box, the whole content is hidden | Play it » |
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
