CSS Overflow is a property that controls what happens to content that exceeds the size of its container. It is used to specify whether to clip the content or to add scrollbars when the content overflows the container.
The CSS Overflow property has four possible values:
visible: This is the default value. It allows the content to overflow the container.hidden: This value clips the content that overflows the container. The content that exceeds the container is not visible.scroll: This value adds scrollbars to the container when the content overflows. The scrollbars allow the user to scroll through the content.auto: This value adds scrollbars to the container only when the content overflows. If the content fits within the container, no scrollbars are added.Let's take a look at some code examples:
In this example, the content overflows the container, but it is still visible because the Overflow property is set to visible.
<div style="width: 200px; height: 100px; border: 1px solid black; overflow: visible;">
<p>This is some long content that overflows the container.</p>
</div>
This is some long content that overflows the container.
In this example, the content overflows the container, but it is clipped because the Overflow property is set to hidden.
<div style="width: 200px; height: 100px; border: 1px solid black; overflow: hidden;">
<p>This is some long content that overflows the container.</p>
</div>
This is some long content that overflows the container.
In this example, the content overflows the container, and scrollbars are added because the Overflow property is set to scroll.
<div style="width: 200px; height: 100px; border: 1px solid black; overflow: scroll;">
<p>This is some long content that overflows the container.</p>
</div>
This is some long content that overflows the container.
In this example, the content overflows the container, and scrollbars are added only when necessary because the Overflow property is set to auto.
<div style="width: 200px; height: 100px; border: 1px solid black; overflow: auto;">
<p>This is some long content that overflows the container.</p>
</div>
This is some long content that overflows the container.
As you can see, the CSS Overflow property is a powerful tool for controlling the behavior of content that exceeds the size of its container. By using the Overflow property, you can ensure that your content is displayed in the way that you want it to be.