Overflow
- In CSS, an "overflow" property is used to control how content that overflows the boundaries of a container should be displayed.
- It is often used when the content within an element is too large to fit within the defined dimensions of that element.
CSS overflow property values:
| Value | Description |
|---|---|
| visible | It specifies that overflow is not clipped. It renders outside the element's box. This is a default value |
| hidden | It specifies that the overflow is clipped, and the rest of the content will be invisible. |
| scroll | It specifies that the overflow is clipped, and a scroll bar is used to see the rest of the content. |
| auto | It specifies that if overflow is clipped, a scroll bar is needed to see the rest of the content. |
| inherit | It inherits the property from its parent element. |
| initial | It is used to set the property to its initial value. |
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.scroll {
background-color: #00ffff;
width: 100px;
height: 100px;
overflow: scroll;
}
div.hidden {
background-color: #00FF00;
width: 100px;
height: 170px;
overflow: hidden;
}
</style>
</head>
<body>
<p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.
</p>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout.
The default value is visible.</div>
<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout.
The default value is visible.</div>
</body>
</html>
Output:
CSS Overflow Property
| Property | Description |
|---|---|
| overflow | This defines what happens if content overflows an element's box |
| overflow-wrap | This defines whether or not the browser can break lines with long words, if they overflow its container |
| overflow-x | This defines what to do with the left/right edges of the content if it overflows the element's content area |
| overflow-y | This defines what to do with the top/bottom edges of the content if it overflows the element's content area |