Crop the left/right edge of the content in the div element - if the content area of the overflow element:
div
{
overflow-x:hidden;
}
Browser support
All major browsers support the overflow-x property.
Note: The overflow-x property does not work correctly in IE8 and earlier browsers.
Definitions and usages
The overflow-x property specifies whether the left/right edge of the content is cropped - if the element content area is overflowed.
Tip: Use the overflow-y property to determine the cropping of the top/bottom edge.
| Default: | visible |
|---|---|
| Inheritance: | no |
| Version: | CSS3 |
| JavaScript syntax: | object .style.overflowX="scroll" |
Grammar
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
| Value | Describe | Test |
|---|---|---|
| visible | Content is not cropped and may appear outside the content box. | Test |
| hidden | Crop Content - No scrolling mechanism is available. | Test |
| scroll | Crop Content - Provides a scrolling mechanism. | Test |
| auto | If the overflow box is overflowed, a scrolling mechanism should be provided. | Test |
| no-display | If the content does not fit the content box, delete the entire box. | Test |
| no-content | If the content doesn't fit into the content box, hide the entire content. | Test |