CSS Overflow
What happens to content that is too large to fit into a space is controlled by the CSS overflow attribute.
———– EXAMPLE MUKVU ———
CSS Overflow
When an element’s content exceeds the allotted space, the overflow attribute determines whether to create scrollbars or clip the content.
The following values apply to the overflow property:
- visible – Default. The overflow is not clipped. The content renders outside the element’s box
- hidden – The overflow is clipped, and the rest of the content will be invisible
- scroll – The overflow is clipped, and a scrollbar is added to see the rest of the content
- auto – Similar to scroll, but it adds scrollbars only when necessary
Note:Â It should be noted that only block elements with a given height can use the overflow property.
Note: Even though “overflow:scroll” is defined, scrollbars in OS X Lion (on Mac) are hidden by default and only shown when needed.
overflow: visible
Since the overflow is displayed by default, it renders outside of the element’s box and is not clipped:
———box banavvu——–
Example
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible;
}
overflow: hidden
The overflow is trimmed and the remaining text is hidden when using the hidden value:
———box banavvu——–
Example
div {
overflow: hidden;
}
overflow: scroll
After the overflow is clipped and the value is set to scroll, a scrollbar is provided to allow for scrolling inside the box. Be aware that even if you don’t need it, this will add a scrollbar that is both horizontal and vertical:
———box banavvu——–
Example
div {
overflow: scroll;
}
overflow: auto
Similar to scroll, the auto value adds scrollbars only when required:
———box banavvu——–
Example
div {
overflow: auto;
}
overflow-x and overflow-y
The properties overflow-x and overflow-y indicate whether to modify the content overflow only in a horizontal or vertical direction, or both:
overflow-x specifies what to do with the left/right edges of the content.
overflow-y specifies what to do with the top/bottom edges of the content.
———box banavvu——–
Example
div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
All CSS Overflow Properties
| Property | Description |
|---|---|
| overflow | Specifies what happens if content overflows an element's box |
| overflow-wrap | Specifies whether or not the browser can break lines with long words, if they overflow its container |
| overflow-x | Specifies what to do with the left/right edges of the content if it overflows the element's content area |
| overflow-y | Specifies what to do with the top/bottom edges of the content if it overflows the element's content area |
