With CSS's "overflow" property, you can control how content acts when it goes outside of its container.
In other words, the overflow property tells how the content inside an element should be shown when the content is bigger than the element itself.
There are four common values for the overflow property:
1. visible:
This is the default value. When content exceeds the limits of its container, it still remains visible and does not disappear.
2. hidden:
Any content that exceeds the container's boundaries is hidden and inaccessible to the user when this value is set.
3. scroll:
This value adds scrollbars to the container, allowing the user to scroll through the content even if it does not overflow.
4. auto:
This value provides a more dynamic approach by adding scrollbars to the container only if the content overflows its boundaries.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overflow Properties Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 20px;
}
.box {
background-color: #ffffff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
width: 300px;
height: 200px;
margin: 20px;
}
.title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.text {
font-size: 16px;
line-height: 1.5;
height: 130px;
}
.visible {
overflow: visible;
}
.hidden {
overflow: hidden;
}
.scroll {
overflow: scroll;
}
.auto {
overflow: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="title">Overflow: visible</div>
<div class="text visible">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat malesuada fermentum. Morbi lobortis est vel est eleifend, et bibendum libero fermentum.
</div>
</div>
<div class="box">
<div class="title">Overflow: hidden</div>
<div class="text hidden">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat malesuada fermentum. Morbi lobortis est vel est eleifend, et bibendum libero fermentum.
</div>
</div>
<div class="box">
<div class="title">Overflow: scroll</div>
<div class="text scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat malesuada fermentum. Morbi lobortis est vel est eleifend, et bibendum libero fermentum.
</div>
</div>
<div class="box">
<div class="title">Overflow: auto</div>
<div class="text auto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat malesuada fermentum. Morbi lobortis est vel est eleifend, et bibendum libero fermentum.
</div>
</div>
</div>
</body>
</html>
