CSS Overflow Properties
- Introduction to CSS Overflow Properties
- Value of CSS overflow property
- CSS overflow-x property
- CSS overflow-y property
Introduction to CSS Overflow Properties
The CSS overflow property specifies that when content (text, image and video etc.) of an HTML elements (<body>, <div>, <h1> and <p> etc.) fails to fit in that element, then what to do?
Before understanding overflow property, it is necessary to understand what is an overflow? Let's try to understand it with an example.
Suppose you have created a div. The height of this div is 400px and width is 400px. Now you add an image to this div whose height is 500px and width is 500px. Here you are not able to fit the image in the specified div because the height of the image is greater than the height of the div. In this situation, the image will overflow the boundary of the div and it will appear outside the border. As you can see in the below image.
This situation is called overflow. CSS provides overflow property to handle this situation.
Values of CSS Overflow Property
The condition of overflow can be handled in many ways. As if the element from which element is overflow, the scroll can be applied.
If the content that is overflowing is not important then it can also be hidden and clipping can only be shown within the element's border. For this, you can use different values of CSS overflow property. The CSS overflow property can have four possible values. These values are given below.
- visible
- hidden
- scroll
- auto
The syntax of the overflow property is given below.
overflow: value;
Let's now try to know about the different value of overflow property in detail with an example.
Let's now try to know about the different value of overflow property in detail with an example.
visible
When the value of the overflow property is defined “visible”, the content which is being overflowed remains visible. This overflow visible value shows the content element is being overflowed out of the border. An example of this has been given below.
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 100px;
height: 100px;
border: 5px solid red;
overflow: visible;
}
</style>
</head>
<body>
<div>
This is an example of overflow property. In this example, you will see that when the text is not fit in the div, it exits while dividing the boundary of the div. Because the overflow property has been defined visible.
</div>
div
{
width: 100px;
height: 100px;
border: 5px solid red;
overflow: visible;
}
</style>
</head>
<body>
<div>
This is an example of overflow property. In this example, you will see that when the text is not fit in the div, it exits while dividing the boundary of the div. Because the overflow property has been defined visible.
</div>
</body>
</html>
The above script will generate the below output.
hidden
When the value of the overflow property is defined "hidden", then the content which is being overflowed out of the border is hidden. Only the content will show which is inside the border. An example of overflow hidden value is being given below.
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 100px;
height: 100px;
border: 5px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<div>
The text that overflows in this example will not be shown. Only the content inside the border will be shown by clipping itself.
</div>
div
{
width: 100px;
height: 100px;
border: 5px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<div>
The text that overflows in this example will not be shown. Only the content inside the border will be shown by clipping itself.
</div>
</body>
</html>
The above script generates the given output below.
scroll
When the value of the CSS overflow property is given scroll, then the element in which the content contains is added scrollbar on the right and bottom side. Content does not go out of the border, but the user needs to scroll to see the whole content. An example of overflow scroll value is being given below.
<!DOCTYPE html>
<html>
<head>
<style>
p
{
width: 75px;
height: 75px;
border: 5px solid red;
padding: 5px;
overflow: scroll;
}
</style>
</head>
<body>
<p>
In this example, content will not be clipped nor content will overflow. Rather a scroll will be created in the paragraph element. Scrolling can see all this content.
</p>
p
{
width: 75px;
height: 75px;
border: 5px solid red;
padding: 5px;
overflow: scroll;
}
</style>
</head>
<body>
<p>
In this example, content will not be clipped nor content will overflow. Rather a scroll will be created in the paragraph element. Scrolling can see all this content.
</p>
</body>
</html>
The above script will generate the below output.
auto
When you define the overflow auto value of the CSS overflow property, the scrollbar is added to the element in the same way as the scroll value.
CSS overflow-x property
By this overflow x property, you can define overflow options for right and bottom side. This property is used only when defining the overflow option separately for the left and right side.
The same values are used with this property those are used with the overflow property. An example of this is being given below.
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 75px;
height: 75px;
border: 5px solid red;
overflow: scroll;
overflow-x: hidden;
}
</style>
</head>
<body>
<div>
In this example, any content overflow that is used in the left and right side while using the overflow-x property has been hidden. This will also not show horizontal scrolling. With the overflow property, the scroll is defined. Doing so will be a vertically scrolling show.
</div>
div
{
width: 75px;
height: 75px;
border: 5px solid red;
overflow: scroll;
overflow-x: hidden;
}
</style>
</head>
<body>
<div>
In this example, any content overflow that is used in the left and right side while using the overflow-x property has been hidden. This will also not show horizontal scrolling. With the overflow property, the scroll is defined. Doing so will be a vertically scrolling show.
</div>
</body>
</html>
The above script will give output below.
CSS overflow-y property
By this overflow y property, you can define different types of overflow options for the right and bottom sides. With this property, the same values are used those are used with the overflow property. An example of this is being given below.
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 50px;
height: 50px;
border: 5px solid red;
overflow: scroll;
overflow-y: hidden;
}
</style>
<body>
<div>
In this example, content that overflows in the top and bottom sides through the overflow-y property has been hidden. Also, the horizontal scrolling has been added through the overflow property.
</div>
div
{
width: 50px;
height: 50px;
border: 5px solid red;
overflow: scroll;
overflow-y: hidden;
}
</style>
<body>
<div>
In this example, content that overflows in the top and bottom sides through the overflow-y property has been hidden. Also, the horizontal scrolling has been added through the overflow property.
</div>
</body>
</html>
The above script generates the given output below.
It was wondering if I could use this write-up on my other website, I will link it back to your website though.Great Thanks. Affinity at serangoon price
ReplyDelete