English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS Basic Tutorial

CSS Box Model

CSS3Basic Tutorial

CSS Reference Manual

CSS @rules (RULES)

CSS Overflow (Overflow)

The overflow property specifies the behavior that occurs when the content of the element overflows (does not fit) the element's box.

Handling Overflow Content

The content of the element may be larger than the size of the box itself. For example, the given width and height properties do not allow enough space to accommodate the element's content.

CSS overflow property, which allows you to specify whether to clip the content, render a scrollbar, or displayBlock-levelthe overflow content of the element.

This property can be one of the following values: visible (default), hidden, scroll, and auto. CSS3also definesoverflow-xandoverflow-yProperties, to allow independent control of vertical and horizontal clipping.

div {
    width: 250px;
    height: 150px;
    overflow: scroll;
}
Test to see‹/›
ValueDescription
visibleDefault value. The content is not clipped; it will be rendered outside the element box, which may overlap with other content.
hiddenThe content of the overflowed element box will be clipped, and the remaining content will be invisible.
scrollThe overflowed content is clipped as if it were hidden, but a scrolling mechanism is provided to access the overflowed content.
autoIf the content overflows the element's box, it will automatically provide a scrollbar to view the remaining content; otherwise, the scrollbar will not appear.