CSS overflow-style

The CSS overflow-style property was originally proposed for specifying the scrolling method/s for elements that overflow.

If the contents of an element are too large to fit inside the element (i.e. they "overflow"), the overflow property can be used to specify how the contents should be displayed.

One option of the overflow property is that the content should scroll. If the "scroll" option is effected, the overflow-style property was intended to specify the preferred scrolling method. For example, the outer container could grow scroll bars. Or, the element could become a "marquee", where the content scrolls across the element, eventually resulting in all the content having been displayed.

Syntax

Possible Values

The value could be either auto, meaning no preference, or a list of methods in order of preference. The browser/user agent would use the first method in the list that it supported. If it supported none, it would use auto.

auto

Specifies that the scrolling method should be automatically determined by the browser/user agent.

marquee-line

Specifies that a marquee should scroll the content horizontally (i.e. for content that overflows to the left or right).

marquee-block

Specifies that a marquee should scroll the content vertically (i.e. for content that overflows above or below the content box).

Dropped Values

The following values were previously included in early CSS3 drafts for this property, but were dropped before the module itself was abandoned. They've been included here for historical reference.

scrollbar

Specifies that the scrolling method should be with scrollbars. That way, the user can use vertical scrollbars to scroll down/up or horizontal scrollbars to scroll left/right.

panner

Specifies that a "panner" should be used to assist the user in viewing all the content. A panner is typically a rectangle shown in one corner of the element, with a smaller rectangle inside. The larger rectangle represents all of the content, while the smaller rectangle can be moved around to view a different part of the content.

move

Specifies that the scrolling method should be "move". This means that the user can move the content around within the content box directly. For example, the cursor might turn into a hand or cross of four arrows, which indicates that the mouse (or other pointing device) can be used to "click and drag" the content around.

marquee

Specifies that the scrolling method should be "marquee". A marquee is an effect where, the content moves autonomously, without the need for the user to do anything. Typically, a marquee will result in the content scrolling horizontally or vertically. Although the content is too large to fit within the outer container, eventually, all of it will be displayed as the content has moved across the content box. Often, a marquee will keep scrolling so that, in the event the user missed some content the first time around, he/she will have further opportunity to view the content as it passes for a second, third, fourth, ... etc time.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial

Represents the value specified as the property's initial value.

inherit

Represents the computed value of the property on the element's parent.

unset

This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Example Code

Basic CSS

Working Example within an HTML Document

CSS Specifications

• The overflow-style property was defined in the CSS Marquee Module Level 3, but this specification has been abandoned and is obsolete.

Browser Support

Browser support for CSS properties can vary, particularly for newer or experimental features. Check current browser compatibility before using a property in production, especially when supporting older browsers.

Initial Value

CSS properties have an initial value that applies when the property has not been explicitly set. The initial value is different from the value inherited from a parent element and may vary between properties.

Inheritance

Some CSS properties inherit their computed value from their parent element by default, while others do not. The inherit, initial, unset, and revert keywords can also be used to control how a property gets its value.

Vendor Prefixes

Most modern CSS properties use the standard, unprefixed syntax. Vendor-prefixed properties such as -webkit- are mainly relevant to older browser versions or specific features and should only be used when required by your browser support targets.