CSS Content Overflow

« Previous Tutorial Next Tutorial »

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.

CSS Overflow Properties

The following table describes the overflow properties provided by CSS:

Property Description
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

CSS Overflow Syntax

The syntax to use the overflow-x and overflow-y properties is given as follows:

overflow-x/overflow-y: value;

In the preceding syntax, the description of various values is given in the following table:

Value Description
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

CSS overflow-style Syntax

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.

CSS Online Test

« Previous Tutorial Next Tutorial »

© Copyright 2021. All Rights Reserved.