clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

More

CSS Overflow X

Imperial Advance Hero Image

CSS Overflow X

It is used when content overflow horizontally from an element box.

 

Syntax - 

overflow-x: value ;

 

values

visible

This is default value which always visible the content if content overflow horizontally the element box.

hidden

It hide all the x-axis content which is outside the element box.
scroll
It scroll all the content horizotally which out side the element box
auto If content is going out side the box then then it automatically scroll the horizontal content otherwise no scrolling there.
normal It is normal text.

 

For example -

<!DOCTYPE html>
<html>

<head>
    <title>CSS Overflow Horizontally</title>
    <link rel="stylesheet" type="text/css" href="E:/style.css">

    <style>
        body {
            display: flex;
            justify-content: space-between;
        }
        .visible {
            background-color: lightblue;
            width: 40px;
            overflow-x: visible;
        }
        .hidden {
            background-color: lightblue;
            width: 40px;
            overflow-x: hidden;
        }
        .scroll {
            background-color: lightblue;
            width: 40px;
            overflow-x: scroll;
        }
        .auto {
            background-color: lightblue;
            width: 40px;
            overflow-x: auto;
        }
    </style>
</head>

<body>
    <p class="visible">Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development rather than software development. </p><br>
    <p class="hidden"> Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development rather than software development. </p><br>
    <p class="scroll">Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development rather than software development. </p><br>
    <p class="auto"> Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development rather than software development. </p>
</body>

</html>

 

Output

OverFlow

CSS