CSS Overflow





 

Sometimes the content shown is too large to be visible in a single line or division of the website. So, to avoid loss of that information we can use overflow property.

Overflow Visible

This makes the whole text visible irrespective of the container size.

    overflow: visible;

Overflow Hidden

It hides the content that doesn’t fit the box.

    overflow: hidden;

Overflow Scroll

It adds an automatic scroller in the container so for the seeing the content it can be scrolled without affecting the container dimensions.

    overflow: scroll;

Overflow Auto

It is quite similar to scroll but the scroller is only added when the content starts getting out of the container. Mostly this option is used to avoid unnecessary scroll bars if the content already is within the content dimensions.

    overflow: auto;

Example:
Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Overflow property</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>CSS Overflow</h1>
    <div class="container">
        <div class="visible">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex cum quo et voluptas inventore quas dolore, natus
            dignissimos? Omnis ab error placeat possimus id iste soluta asperiores consectetur nam exercitationem?
        </div>
        <h1>CSS Visible</h1>
        <hr>
        <div class="hidden">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex cum quo et voluptas inventore quas dolore, natus
            dignissimos? Omnis ab error placeat possimus id iste soluta asperiores consectetur nam exercitationem?
        </div>
        <h1>CSS hidden</h1>
        <hr>
        <div class="scroll">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex cum quo et voluptas inventore quas dolore, natus
            dignissimos? Omnis ab error placeat possimus id iste soluta asperiores consectetur nam exercitationem?
        </div>
        <h1>CSS Scroll</h1>
        <hr>
        <div class="auto">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex cum quo et voluptas inventore quas dolore, natus
            dignissimos? Omnis ab error placeat possimus id iste soluta asperiores consectetur nam exercitationem?
        </div>
        <h1>CSS auto </h1>
    </div>
</body>

</html>

style.css

* {
    box-sizing: border-box;
}

h1 {
    text-shadow: 2px 2px 4px red;
    margin-bottom: 30px;
    text-align: center;
}

.container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 300px;
    border: 2px solid green;
}



.visible {
    width: 300px;
    height: 60px;
    border: 2px solid red;
    overflow: visible;
    padding: 20px 10px;
    margin-right: 40px;
}

.hidden {
    width: 300px;
    height: 60px;
    border: 2px solid red;
    overflow: hidden;
    padding: 20px 30px;
}

.scroll {
    width: 300px;
    height: 150px;
    border: 2px solid red;
    overflow: scroll;
    padding: 20px 30px;
}

.auto {
    width: 300px;
    height: 150px;
    border: 2px solid red;
    overflow: auto;
    padding: 20px 30px;
}


Output: you can find it at the top Image.


Related Posts:

  • CSS Combinators It explains the relation between multiple or single selectors. There are four major combinators that we will be looking at here.Descendant Selec… Read More
  • CSS Overflow Sometimes the content shown is too large to be visible in a single line or division of the website. So, to avoid loss of that information we can… Read More
  • position Property The position property specifies the type of positioning method used for an elementThere are five different position values:staticrelativefixedab… Read More
  • Display Property The display property specifies if/how an element is displayed.Every HTML element has a default display value depending on what type of element i… Read More
  • Z-index The z-index property specifies the stack order of an element.When elements are positioned, they can overlap other elements.An element can have a… Read More

0 Comments:

Post a Comment

Do leave your comments