overflow-block

Description
Syntax
Examples
Links

Description

The overflow-block property for CSS specifies the handling of overflow in the block axis: vertical axis in horizontal writing-mode and horizontal axis in vertical writing-mode.

Syntax

CSS

overflow-block: value;

JS

object.style.overflowBlock = "value";

Values

<'overflow-block'> = <'overflow'>

<'overflow'> = [ visible | hidden | clip | scroll | auto ]{1,2}

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>
        .myclass
        {
            border-style: solid;
            height: 100px;
            width: 100px;
            //writing-mode: vertical-rl;

blockquote
            {
                background-color: yellow;
                //height: 150%;
                margin: 50%;
                padding: 50%;
                width: 150%;

cite
                {
                    display: block;
                    text-align: right;
                }
            }
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>auto</button>
    <button>clip</button>
    <button>hidden</button>
    <button>scroll</button>
    <button>visible</button>
    <div class="myclass">
        <blockquote>
            I didn't like the play, but then I saw it under adverse conditions - the curtain was up.
            <cite>Groucho Marx</cite>
        </blockquote>
    </div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector(".myclass").style.overflowBlock = myparameter.target.innerHTML;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>

Overview

Search

Download

العربية

česky

Dansk

Deutsch

English

Español

Suomi

Français

Magyar

Bahasa Indonesia

Italiano

日本語

Malagasy

te reo Māori

한국어

Nederlands

Norsk

Polski

Português

Română

Pyccкий

Shqip

Svenska

Wikang Tagalog

українська

Tiếng Việt

简体中文

繁體中文

Overview

Attributes

Elements

Other

Overview

Functions

Properties

Pseudo-Classes

Pseudo-Elements

Units

Overview

AbortController

AbstractRange

AbortSignal

ChildNode

Comment

console

CustomEvent

Declarations

Document

DocumentFragment

DocumentOrShadowRoot

DOMImplementation

DOMStringList

DOMTokenList

Element

Event

EventTarget

HTMLAllCollection

HTMLBaseElement

HTMLCollection

HTMLDialogElement

HTMLElement

HTMLFormControlsCollection

HTMLLinkElement

HTMLOptionsCollection

HTMLOrSVGElement

HTMLVideoElement

Iterations

Location

MutationObserver

MutationRecord

Node

NodeList

NonDocumentTypeChildNode

NonElementParentNode

ParentNode

Prompts

RadioNodeList