While designing a web page you may want to accommodate multiple elements with large content. Displaying complete contents of such elements may not be possible due to limited space on a web page. You wish to manage the overflowing content in an element with specific dimensions. CSS Overflow property will come handy in such situations.
The CSS Overflow property is used to manage the content for the elements whose width and height put a limit on the visibility of the content. Using the CSS Overflow property the overflowing content can be managed by making it hidden, scrolled or visible. Paragraph and image HTML elements display the application of CSS Overflow property.
CSS Overflow Property Values
This property can be assigned 4 values-
Visible
This is the default value of CSS Overflow property. By default the contents of the element will overflow and will be display after the bottom border of the element. The width and height of the element will not be altered.
Hidden
When hidden value is assigned to CSS Overflow property the overflowing contents of the element will not be visible. The element which exceeds the height of HTML element will be hidden. To a user the content of the element will appear incomplete. Width of the HTML element will remain same.
Auto
CSS Overflow property with value Auto will display the contents of the element within specified element and the overflowing contents can be seen by using the scroll added automatically on the right side of the HTML element. The width and height of the element will not be altered.
Scroll
The value Scroll will display the vertical and horizontal scroll bars even If the contents of the specified element are completely visible and within the borders of the element. The width and height of the element will remain same. Horizontal and vertical both scroll bars will be available to scroll in both directions
Example CSS Overflow
In the example four class selectors are defined with different values for CSS Overflow Property and applied with different background colors. The height and width for all these class selectors is same. You can see the output and understand how this property changes the visibility of text when these class selectors are applied to four different paragraphs.
<HTML>
<STYLE>
.v{height:50px;
width:50%;
overflow:visible;
border:solid;
background-color:pink;}
.a{height:50px;
width:50%;
overflow:auto;
border:solid;
background-color:yellow;
top:40px;
position:relative;}
.h{height:50px;
width:50%;
overflow:hidden;
border:solid;
background-color:lavender;
top:40px;
position:relative;}
.s{height:50px;
width:50%;
overflow:scroll;
border:solid;
background-color:aqua;
top:40px;
position:relative;}
</STYLE>
<BODY >
<P class="v"><B>VISIBLE</B>dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</P>
<P class="a"><B>AUTO</B>dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</P>
<P class="h"><B>HIDDEN</B>dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</P>
<P class="s"><B>SCROLL</B>expressions of Lorem Ipsum.</P>
</BODY>
</HTML>