Scribd
Upload
10 views4 pages

CSS Overflow

The document explains the CSS overflow property, which controls how content is handled when it exceeds the element's box. It details the different values for overflow: visible, hidden, scroll, and auto, along with their effects. Examples are provided to illustrate the use of the overflow property in HTML and CSS.

Uploaded by

Shubham Patel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views4 pages

CSS Overflow

The document explains the CSS overflow property, which controls how content is handled when it exceeds the element's box. It details the different values for overflow: visible, hidden, scroll, and auto, along with their effects. Examples are provided to illustrate the use of the overflow property in HTML and CSS.

Uploaded by

Shubham Patel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

CSS

Topperworld.in

Overflow
• The CSS overflow controls the big content. It tells whether to clip content
or to add scroll bars.
The overflow contains the following property:
✓ visible: The content is not clipped and is visible outside the element
box.
✓ Hidden: The overflow is clipped and the rest of the content is invisible.
✓ Scroll: The overflow is clipped but a scrollbar is added to see the rest of
the content. The scrollbar can be horizontal or vertical.
✓ Auto: It automatically adds a scrollbar whenever it is required.
✓ Overflow-x and Overflow-y: This property specifies how to
change the overflow of elements. x deals with horizontal edges and y
deals with vertical edges.

Example: In this example, we are using overflow: visible; property.

<!DOCTYPE>
<html>

<head>
<style>
p{
width: 100px;
height: 80px;
border: 1px solid;
overflow: visible;
}

©Topperworld
CSS

</style>
</head>

<body>
<h2>
Topper World<p>
The CSS overflow controls big content.
It tells whether to clip content or to
add scroll bars

</p>

</h2>

</body>
</html>

Output:

©Topperworld
CSS

Example: In this example, we are using overflow: hidden; property.

<!DOCTYPE>
<html>

<head>
<style>
p{
width: 100px;
height: 80px;
border: 1px solid;
overflow: hidden;
}
</style>
</head>
<body>
<h2>
Topper World
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or
to add scroll bars.
</p>
</body>
</html>

©Topperworld
CSS

Output:

©Topperworld

You might also like