When a area size becomes small for it's content than the possibilities
are to make it responsive, for this overflow property is used.
There are following values for overflow property.
1) visible
2) hidden
3) scroll
4) auto
Overflow visible
The Visible is default value.If you don't specify any overflow property
on any element, it means overflow visible is by default applied.
Overflow hidden
The hidden property is used to hide the content
which is overflowing beyond the edges of the element’s content area.
<style type="text/css">
div{
overflow: hidden;
border: 1px solid black;
height: 80px;
max-width: 300px;
}
</style>
<div>
hidden property is used to hide the content
which is overflowing beyond the edges of the element’s content area.
hidden property is used to hide the content
which is overflowing beyond the edges of the element’s content area.
hidden property is used to hide the content
which is overflowing beyond the edges of the element’s content area.
hidden property is used to hide the content
which is overflowing beyond the edges of the element’s content area.
</div>
Output of above code
hidden property is used to hide the content
which is overflowing beyond the edges of the element’s content area.
hidden property is used to hide the content
which is overflowing beyond the edges of the element’s content area.
hidden property is used to hide the content
which is overflowing beyond the edges of the element’s content area.
hidden property is used to hide the content
which is overflowing beyond the edges of the element’s content area.
Overflow scroll
The Scroll property is used to add scroll bars to
the element even the content may fit to area or not.
<style type="text/css">
div{
overflow: scroll;
border: 1px solid black;
height: 100px;
max-width: 300px;
}
</style>
<div>
Scroll property is used to add scroll bars to
the element even the content may fit to area or not.
Scroll property is used to add scroll bars to
the element even the content may fit to area or not.
Scroll property is used to add scroll bars to
the element even the content may fit to area or not.
</div>
Output of above code
The Scroll property is used to add scroll bars to
the element even the content may fit to area or not.
Scroll property is used to add scroll bars to
the element even the content may fit to area or not.
Scroll property is used to add scroll bars to
the element even the content may fit to area or not.
Overflow auto
The auto is also used to add scroll bars to the element
like overflow: scroll.But there is difference, auto adds scroll bars when the
element needs it.If content is fit to element then it is not applied.
<style type="text/css">
div{
overflow: auto;
border: 1px solid black;
height: 100px;
max-width: 400px;
}
</style>
<div>
auto is also used to add scroll bars to the element
like overflow: scroll.But there is difference, auto adds scroll bars when the
element needs it.If content is fit to element then it is not applied.
auto is also used to add scroll bars to the element
like overflow: scroll.But there is difference, auto adds scroll bars when the
element needs it.If content is fit to element then it is not applied.
</div>
Output of above code
The auto is also used to add scroll bars to the element
like overflow: scroll.But there is difference, auto adds scroll bars when the
element needs it.If content is fit to element then it is not applied.
auto is also used to add scroll bars to the element
like overflow: scroll.But there is difference, auto adds scroll bars when the
element needs it.If content is fit to element then it is not applied.
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
