Arrow

CSS Overflow X

AuthorHariom Prajapati

Pubish Date11 Sep 2022

categoryCSS

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