In your webpage, when you use any HTML element and its content becomes too big and goes out of its box, you use the overflow property to handle it.
This property can show extra content, hide it, or give a scroll bar as per your needs.
Syntax:
element {
overflow: visible | hidden | scroll | auto;
}
Where:
- Visible → When you set this property, it shows the overflow contents.
- Hidden → When you set this property, it hides the overflow contents.
- Scroll → When you set this property, it scrolls the overflow contents horizontally and vertically.
- Auto → If you don’t set overflow, the browser adds scroll bars only when content overflows.
Example:
<div style="width: 150px; height: 50px; border: 1px solid black; overflow: scroll;"> The content inside the <div> element will appear with a scroll bar. </div>
Output:
The data shows with a scroll bar.