Verification: 52bc5e43554438b2
HTML & CSS

Overflow Property in Html & CSS with Programming Examples

Description

In this article, I will explain the overflow property in CSS. With CSS overflow Property, you can set how to display the part that protrudes from the box. In this article, you will learn

  • What is CSS overflow property?
  • How to use overflow Property in CSS
  • The behavior of overflow property in CSS visible, hidden, scroll, and auto

I will explain about it. If you want to know what you can do with the CSS overflow property, please take a look.




What is CSS overflow property?

First, let me explain what an overflow property is. Overflow is a property that sets how to display the part that protrudes from the box set by CSS. You can set four major values ​​for this overflow, and the behavior will change accordingly. Let’s take a look at its value.

How to use overflow Property in CSS:

Overflow property in CSS has four values. Visible leaves the protruding part as it is. By the way, the visible property of the overflow in CSS is the initial value. With the hidden property of the overflow, the protruding part is hidden as it is.

With the scroll property of the overflow, you can see all the protruding parts by scrolling and the Auto property of the overflow in CSS will change depending on the browser, but basically, the same result as scrolling will be obtained. Let’s take it step by step.



Visible Property of the overflow in CSS

First, the value of the overflow property is set to visible. See the code here.

Place the below code in style.css or use inline CSS

<style>

    .textbox {

background-color: lightblue;

width: 170px;

height: 110px;

overflow:visible;

border-style:dotted;

    }

</style>

Place the below code inside body tag:

<div class = “textbox” >

<p>Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        </p>                  

</div>

Output:

overflow property in CSS

The area of ​​the box is set by width and height. The box area is the part where the dotted line is specified in the border. I’ve placed as many characters of text inside the box that would overflow the box.

Then, you can see that when it is set to visible, it is displayed outside the dotted frame.



CSS overflow hidden Property:

Next, let’s set the value of the overflow to hidden. See the code here.

Place the below code in style.css or use inline CSS

<style>

    .textbox {

background-color: lightblue;

width: 170px;

height: 110px;

overflow:hidden;

border-style:dotted;

    }

</style>

Place the below code inside body tag

<div class = “textbox” >

<p>Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        </p>                    

</div>

Output:

overflow property in CSS

You can’t see the part outside the dotted line.

The important thing here is that even if the character is not well separated, it will not be visible. . If you want to use hidden to make the character itself look beautiful, you need to adjust the position of the character with padding.

In this case, the p tag is used, so there is a line break, so the top is empty. In such a case, change the p tag to a span tag or change the display to inline to solve it by changing it to an inline element.



overflow Scroll Property in CSS

Next, let’s set the value of the overflow to scroll. See the code here.

Place the below code in style.css or use inline CSS

<style>

    .textbox {

background-color: lightblue;

width: 170px;

height: 110px;

overflow:scroll;

border-style:dotted;

    }

</style>

Place the below code inside body tag

<div class = “textbox” >

<p>Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        Programming digest

                        </p>

</div>

Output:

overflow property in CSS

You can scroll the inside of the dotted line to see it to the end. You can see this being used in the part where the updated history of a simple web page is displayed. This value is often used when you want to post a little more information in a limited space.

Even if the value is auto, you can usually get the same effect as this scroll.




Summary

In this article, I explained how to use CSS overflow Property and the difference in display seen with each value. Did you know where and how overflow is used?

It’s very easy to use, so let’s see how it works first. If you forget how to use it, please read this article again.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button