Sometimes, the amount of content placed in an HTML element is much larger than the capacity of the element. In such cases, the content overflows from the element, which may distrupt the display of the entire Web page.
CSS provides various overflow properties to restrict the overflow of content in an element.
The following table describes the overflow properties provided by CSS:
|overflow-x||Specifies clipping at the left and right edges|
|overflow-y||Specifies clipping at the top and bottom edges|
|overflow-style||Specifies a scrolling method for elements that overflow|
The syntax to use the overflow-x and overflow-y properties is given as follows:
In the preceding syntax, the description of various values is given in the following table:
|visible||Indicates that the content is not clipped|
|hidden||Indicates that the content is clipped and that no scrolling mechanism should be provided to view the content outside the clipping region|
|scroll||Indicates that the content is clipped and a scrolling mechanism should be displayed for a box|
|auto||Indicates that a scrolling mechanism has to be provided to a box, because the content of this box overflows from its content area|
|no-display||Indicates that if the content does not fit in the content box, the box is removed completely|
|no-content||Indicates that if content does not fit in the content box, the content is hidden completely|
The syntax to use the overflow-style property is given as follows:
overflow-style:auto | [scrollbar|panner|move|marquee][,[scrollbar|panner|move|marquee]]*;
The overflow shorthand can be used as an alternate to set the values for the overflow-x and overflow-y properties.