CSS overflow property is used to control the content overflow of an element. It specifies what should happen if the content of an element exceeds the size of the element's box.
There are four values for the overflow property:
visible: The content is not clipped and may be rendered outside the element's box.hidden: The content is clipped and not visible outside the element's box.scroll: The content is clipped and a scrollbar is added to see the rest of the content.auto: The content is clipped and a scrollbar is added only if necessary.Let's see some examples:
In this example, the content is not clipped and may be rendered outside the element's box:
<div style="width: 200px; height: 100px; border: 1px solid black; overflow: visible;">
<p>This is some long text that will not be clipped.</p>
</div>
This is some long text that will not be clipped.
In this example, the content is clipped and not visible outside the element's box:
<div style="width: 200px; height: 100px; border: 1px solid black; overflow: hidden;">
<p>This is some long text that will be clipped.</p>
</div>
This is some long text that will be clipped.
In this example, the content is clipped and a scrollbar is added to see the rest of the content:
<div style="width: 200px; height: 100px; border: 1px solid black; overflow: scroll;">
<p>This is some long text that will be clipped and a scrollbar will be added to see the rest of the content.</p>
</div>
This is some long text that will be clipped and a scrollbar will be added to see the rest of the content.
In this example, the content is clipped and a scrollbar is added only if necessary:
<div style="width: 200px; height: 100px; border: 1px solid black; overflow: auto;">
<p>This is some long text that will be clipped and a scrollbar will be added only if necessary.</p>
</div>
This is some long text that will be clipped and a scrollbar will be added only if necessary.
That's it for the overflow property in CSS. Remember to use it wisely to improve the user experience of your website.