CSS Overflow
Syntax
- overflow: visible | hidden | scroll | auto | initial | inherit;
Parameters
Overflow Value | Details |
|---|---|
visible | Shows all overflowing content outside the element |
scroll | Hides the overflowing content and adds a scroll bar |
hidden | Hides the overflowing content, both scroll bars disappear and the page becomes fixed |
auto | Same as scroll if content overflows, but doesn't add scroll bar if content fits |
inherit | Inherit's the parent element's value for this property |
Remarks
When an element is too small to display it's contents, what happens? By default, the content will just overflow and display outside the element. That makes your work look bad. You want your work to look good, so you set the overflow property to handle the overflowing content in a desirable way.
Values for the overflow property are identical to those for the overflow-x and overflow-y properties, exept that they apply along each axis
The overflow-wrap property has also been known as the word-wrap property.
Important note: Using the overflow property with a value different to visible will create a new block formatting context.
