CSS Overflow

Posted in /   /  

CSS Overflow
vinaykhatri

Vinay Khatri
Last updated on March 29, 2024

    In this CSS tutorial, we will be discussing the CSS Overflow property, which is a part of Layout styling. We will also be covering all the different values associated with the overflow property, which includes visible, hidden, scroll and auto .

    CSS Overflow Property

    The overflow property deals with the content of the element; it decides what to do with the content if it does not fit in the element specified area. There are four major values accepted by the overflow property

    Overflow Values Description
    visible It is the default value for the overflow. And if the content does not fit in the specified area, then it would leak from the element box.
    hidden If an element property is set to hidden, then it will only show that content which fit in its element box and the rest of the content will become invisible.
    scroll It creates a scrollbar next to the element box so the user can scroll the element content.
    auto It stands for automatic, and it follows the scroll value if the content does not fit in the element box. Else it follows the visible value.

    CSS overflow:visible

    visible is the default value for the overflow property. If an element overflow property is visible, then all of the element content will be displayed on the screen even if it does not fit in the element box. Visible is not a good value for the responsive webpages, because it leads to leaking content and overlapping one content with another.

    Example

    <!DOCTYPE html>
    <html>
    <head>
     <style>
      p {
       background-color: red;
       width: 300px;
       height: 40px;
       border: 1px dotted black;
       overflow: visible;
    }
    </style>
    </head>
    <body>
       <p>
        Visible is the default value for every element if the overflow property is not 
        defined. The only use of overflow property to control the content visibility in its 
        element box. In this example, you can see that some of this paragraph content is leaking
        out of its element box.
       </p>
    </body>
    </html>

    Preview

    Visible is the default value for every element if the overflow property is not defined. The only use of overflow property to control the content visibility in its element box. In this example, you can see that some of this paragraph content is leaking out of its element box.

    CSS overflow:hidden

    The hidden value is just the opposite of visible value. Suppose an element overflow property is set to hidden. In that case, only that content will be displayed on the browser which fit in the element box area, and the rest of the content will become invisible. The property comes useful when we want to show only a part of the content.

    Example

    <!DOCTYPE html>
    <html>
    <head>
    <style>
     p {
      background-color: red;
      width: 300px;
      height: 40px;
      border: 1px dotted black;
      overflow: hidden;
    }
    </style>
    
    </head>
    <body>
        <p>
           Hidden value makes invisible that part of content which does not fit in the element 
           box area.In this example, you can see that some of the paragraph text is not 
           displayed on the browser, because of the hidden value
       </p>
    </body>
    </html>

    Preview:

    Hidden value makes invisible that part of content which does not fit in the element box area.

    CSS overflow:scroll

    The scroll value creates a scroll bar inside the element box, so the user can scroll the element content which does not fit in the element box area.

    Example

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p {
    background-color: red;
    width: 300px;
    height: 70px;
    border: 1px dotted black;
    overflow: scroll;
    }
    </style>
    </head>
    <body>
      <p>
           Scroll value create a scroll bar with in the element box so the user can scroll the 
           element content if it does not fit in the element box area.
      </p>
    </body>
    </html>

    Preview:

    Scroll value create a scroll bar within the element box so the user can scroll the element content if it does not fit in the element box area.

    CSS overflow:auto

    The auto value follows the scroll if the content does not fit in the element box; else it follows the visible value.

    Example

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p {
      background-color: red;
      width: 300px;
      height: 70px;
      border: 1px dotted black;
      overflow: auto;
    }
    </style>
    </head>
    <body>
        <p>    
           Auto stands for automatic value, and it swap value between visible and scroll. 
           If the content of the element does not fit in the element box then it follow the scroll 
           value else it follow the visible.
        </p>
    </body>
    </html>

    Preview

    Auto stands for automatic value and it swap value between visible and scroll. If the content of the element does not fit in the element box, then it follows the scroll value else it follows the visible.

    Summary

    • Overflow property comes under the CSS layout styling.
    • Overflow deals with content visibility within the element box.
    • It accepts four values, visible, hidden, scroll and
    • visible is the default value for every element.
    • hidden value makes the element content invisible, which does not fit in the element box.
    • scroll create a scrollbar within the element box.
    • auto value toggle between scroll and visible.

    People are also reading:

    Leave a Comment on this Post

    0 Comments