overflow-x

Description
Syntax
Examples
Links

Description

The overflow-x property for CSS specifies the handling of overflow in the horizontal direction.

Syntax

CSS

overflow-x: value;

JS

object.style.overflowX = "value";

Values

<'overflow-x'> = visible | hidden | clip | scroll | auto

visible

There is no special handling of overflow, the box's content is rendered outside the box if positioned there.

hidden

The box's content is clipped to its padding box and the UA must not provide any scrolling user interface to view the content outside the clipping region, nor allow scrolling by direct intervention of the user.

clip

Like hidden, but also forbids scrolling.

scroll

Indicates that the content is clipped to the padding box, but can be scrolled into view.

auto

Automatically specified by the user agent.

Initial

visible

Examples

1 · auto

2 · clip

3 · hidden

4 · scroll

5 · visible

6 · JS

<!doctype html>
<html>
<head>
    <style>
        blockquote
        {
            border-style: dashed;
            border-width: thin;
            margin-left: 50px;
            margin-top: 50px;
            width: 150px;
        }
        cite
        {
            display: block;
            text-align: right;
        }
        div
        {
            border-color: red;
            border-style: solid;
            border-width: thin;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>auto</button>
    <button>clip</button>
    <button>hidden</button>
    <button>scroll</button>
    <button>visible</button>
    <div>
        <blockquote>
            <p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
            <cite>Groucho Marx</cite>
        </blockquote>
    </div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("div").style.overflowX = myparameter.target.innerHTML;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>