CSS overflow
Display and OverflowIn this lesson, we will learn how to manage content overflow in web design using the CSS overflow property.
CSS overflow Property
The CSS overflow property is an vital tool for controlling what happens when content overflows out of its containing element. This property determines how the content will be displayed when it exceeds the boundaries of its container element.
The values of CSS overflow property are:
- visible
- hidden
- scroll
- auto
overflow: visible
The default value of CSS overflow property is visible, which means that content overflowing the element's box will be displayed outside the box. This can lead to layout issues.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS overflow visible Example</title>
<!-- Internal CSS -->
<style>
div {
background-color: yellow;
width: 400px;
height: 200px;
overflow: visible;
}
</style>
</head>
<body>
<div>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
</div>
</body>
</html>overflow: hidden
The overflow: hidden value hides any overflowing content, effectively clipping it. This is often used to create responsive designs or hide excess content within a fixed-size container.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS overflow hidden Example</title>
<!-- Internal CSS -->
<style>
div {
background-color: yellow;
width: 400px;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
</div>
</body>
</html>overflow: scroll
The overflow: scroll value adds scrollbars (horizontal and vertical) to the element if its content overflows. Users can then scroll to see the hidden content.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS overflow scroll Example</title>
<!-- Internal CSS -->
<style>
div {
background-color: yellow;
width: 400px;
height: 200px;
overflow: scroll;
}
p {
white-space: nowrap;
}
</style>
</head>
<body>
<div>
<p>This is a sample paragraph.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
</div>
</body>
</html>overflow: auto
The overflow: auto value is similar to scroll, but it only adds scrollbars when necessary. If the content fits within the container, no scrollbars are displayed.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS overflow auto Example</title>
<!-- Internal CSS -->
<style>
div {
background-color: yellow;
width: 400px;
height: 200px;
overflow: auto;
}
</style>
</head>
<body>
<div>
<p>This is a sample paragraph.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
</div>
</body>
</html>overflow-x and overflow-y
Sometimes, you may want to control horizontal and vertical overflow separately. CSS provides overflow-x and overflow-y properties for this purpose.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS overflow-x and overflow-y Example</title>
<!-- Internal CSS -->
<style>
#d1 {
background-color: yellow;
width: 400px;
height: 200px;
overflow-y: scroll;
}
#d2 {
background-color: violet;
width: 400px;
height: 100px;
margin-top: 10px;
overflow-x: scroll;
}
p {
white-space: nowrap;
}
</style>
</head>
<body>
<div id="d1">
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
<p>This is a sample paragraph.</p>
</div>
<div id="d2">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</body>
</html>