CSS Overflow

The overflow property in CSS specifies how to handle content that overflows the size of its container. It can be used to control how content is displayed when it is too large to fit in the designated area.

There are four possible values for the overflow property:

• visible: Default value. Content is not clipped and may be rendered outside its container.
• hidden: Content is clipped and not displayed if it overflows its container.
• scroll: Content is clipped and a scrollbar is added to view the rest of the content.
• auto: Similar to scroll, but only adds a scrollbar when necessary.

Let's take a look at some examples to better understand how overflow works.

Example 1: Overflow visible

In this example, the overflow property is set to visible, so the content will be allowed to overflow the container:

<div style="width: 100px; height: 80; border: 1px solid red; overflow: visible;">
  This is some long text that will overflow the container.
</div>

Example 2: Overflow hidden

In this example, the overflow property is set to hidden, so the content will be clipped and not displayed if it overflows the container:

<div style="width: 100px; height: 80px; border: 1px solid edoverflow: hidden;">
  This is some long text that will overflow the container.
</div>

Example 3: Overflow scroll

In this example, the overflow property is set to scroll, so a scrollbar will be added to view the rest of the content if it overflows the container:

<div style="width: 200px; height: 100px; border: 1px solid red; overflow: scroll;">
  This is some long text that will overflow the container.
</div>

Example 4: Overflow auto

In this example, the overflow property is set to auto, so a scrollbar will be added only when necessary to view the content that overflows the container:

<div style="width: 100px; height: 80px; border: 1px solid red; overflow: auto;">
  This is some long text that will overflow the container.
</div>