Categories
CSS overflow is a property that controls how content overflows the boundaries of its container when the content is larger than the container's size. It is commonly used to manage overflow in block-level and inline-block elements.
The overflow property accepts four main values:
1. visible (Default):
- This is the default value, and it allows content to overflow its container without any clipping. The overflowing content may overlap other elements on the page.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Overflow Example 1</title>
<style>
.container {
width: 200px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus feugiat orci eget ultrices.
</div>
</body>
</html>
In this example, the content overflows the .container div because the text is larger than the container's specified height and width.
2. hidden:
- With
overflow: hidden;, any content that overflows the container is clipped and hidden. It does not display the overflowing content.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Overflow Example 2</title>
<style>
.container {
width: 200px;
height: 100px;
background-color: lightblue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus feugiat orci eget ultrices.
</div>
</body>
</html>
In this example, the overflow: hidden; property ensures that the overflowing text is clipped, and only the visible content within the container is displayed.
3. scroll:
overflow: scroll;adds scrollbars to the container, even if the content does not overflow. When the content exceeds the container size, both vertical and horizontal scrollbars are displayed.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Overflow Example 3</title>
<style>
.container {
width: 200px;
height: 100px;
background-color: lightblue;
overflow: scroll;
}
</style>
</head>
<body>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus feugiat orci eget ultrices.
</div>
</body>
</html>
In this example, the overflow: scroll; property ensures that both vertical and horizontal scrollbars are displayed within the container, allowing users to scroll through the content.
4. auto:
overflow: auto;adds scrollbars to the container only when the content overflows. If the content fits within the container, no scrollbars are shown.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Overflow Example 4</title>
<style>
.container {
width: 200px;
height: 100px;
background-color: lightblue;
overflow: auto;
}
</style>
</head>
<body>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus feugiat orci eget ultrices.
</div>
</body>
</html>
In this example, the overflow: auto; property ensures that scrollbars are displayed when the content exceeds the container size, but they are hidden when the content fits within the container.
Complex Example - Overflow with Positioning:
In this example, we'll explore how overflow interacts with positioning:
<!DOCTYPE html>
<html>
<head>
<title>Overflow Example 5</title>
<style>
.container {
width: 200px;
height: 100px;
background-color: lightblue;
overflow: hidden;
position: relative;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus feugiat orci eget ultrices.
</div>
</div>
</body>
</html>
In this example, we have a .container div with overflow: hidden; and a .content div inside it. The .content div is absolutely positioned in the center of the container using position: absolute;, top: 50%;, left: 50%;, and transform: translate(-50%, -50%);.
As the content of the .content div overflows the .container, the overflow: hidden; property ensures that the overflowing text is clipped and hidden, maintaining the centered position of the .content div.