CSS Layout - Overflow
The CSS overflow property is used to control how content is displayed when it overflows the element box.
The text content here is scrollable, and the scrollbar direction is vertical.
The text content here is scrollable, and the scrollbar direction is vertical.
The text content here is scrollable, and the scrollbar direction is vertical.
The text content here is scrollable, and the scrollbar direction is vertical.
The text content here is scrollable, and the scrollbar direction is vertical.
The text content here is scrollable, and the scrollbar direction is vertical.
CSS Overflow
The CSS overflow property can control the addition of a scrollbar within the corresponding element area when content overflows the element box.
The overflow property has the following values:
| Value | Description |
|---|---|
| visible | Default value. The content is not clipped and is rendered outside the element box. |
| hidden | The content is clipped, and the rest of the content is invisible. |
| scroll | The content is clipped, but the browser displays a scrollbar to view the rest of the content. |
| auto | If the content is clipped, the browser displays a scrollbar to view the rest of the content. |
| inherit | Specifies that the value of the overflow property should be inherited from the parent element. |
Note:The overflow property only works on block elements with a specified height.
Note:On OS X Lion (Mac system), scrollbars are hidden by default and only appear when in use (the same applies when setting "overflow:scroll").
overflow: visible
By default, the value of overflow is visible, which means the content overflows the element box:
The text content here will overflow the element box.
The text content here will overflow the element box.
The text content here will overflow the element box.
The text content here will overflow the element box.
The text content here will overflow the element box.
The text content here will overflow the element box.
The text content here will overflow the element box.
Example
Try it Yourself »