HTML Div Tag Overflow CSS Style Scrollbars
The HTML Div tag supports a CSS style property of overflow scrollbars that enables you to adjust the large content within the fixed size of height and width available on the HTML web page. To use the overflow scrollbars CSS style you have to fix the height and width of the targeted HTML div <div> tag. These height and width CSS properties of Div tag don’t allow the div tag to exceed out of this specified area. Place large amount of text inside the div tag, it will exceed the fixed limit of height to adjust the text but it will not exceed the limit of width coz div tag automatically wraps the text from the available white spaces between the words. Now here we will learn how to use the horizontal as well as vertical text overflow style of div by applying the overflow CSS style to the HTML div <div> tag.
CSS Div Overflow Examples:
From the following links you can view the live samples of Div overflow styles using CSS:
CSS Overflow and White-Space Property Styles
overflow: CSS overflow property consists of four types of values that display the scrollbars for the content placed inside the div tag with fixed height and width properties:
-
auto: auto value for overflow CSS style displays the vertical or horizontal scrollbar automatically it text inside the div tag exceed the limit in any aspect such towards height or towards width. By default it displays vertical scrollbars due to text wrapping in vertical order that obeys the limit of width property.
-
hidden: hidden value for overflow CSS style hides the text overflow of HTML div tag. It clips the text vertically and horizontally both if it exceeds the limit of height or width of the targeting div <div> tag.
-
scroll: scroll value for overflow CSS style displays both vertical and horizontal scrollbar boundaries but displays the scrollbar rider only in the direction whose limits are being crossed by the text placed inside the div <div> tag.
-
visible: visible value for overflow CSS style is the default property value for the Div tag that allows the text inside the div to expand out of the limits of height and width applied on the HTML div <div> tag.
white-space: CSS white-space property also supports four types of values that allow to wrap or nowrap the text from the avalibale spaces, tabs or line break between the words:
-
normal: normal value for white-space CSS style works by default for the div tag that allows to wrap the text from white spaces between characters and words.
-
nowrap: nowrap value for white-space CSS style does not allow to wrap the text from white spaces.
-
pre: pre value for white-space CSS style works same as HTML pre <pre> tag that allows the odd tabs and spaces between the words. It displays the pre formatted text as it is.
-
pre-line and pre-wrap: both these values work almost similarly that do not allow the odd tabs but wraps the text from HTML line breaks and spaces available between the words.
If you don't want to use scrollbars in your design then you can try the Javascript code to get and set the Div tag's height and width dynamically. See the examples here: Javascript Getting Div Height and Width Dynamically.
Example of HTML Div Tag Overflow Scrollbars using CSS styles
<html>
<head>
<title>HTML Div Overflow scrollbars</title>
<style type="text/css">
.divScroll-1 {
height: 100px;
width: 200px;
overflow: scroll;
}
.divScroll-2 {
height: 100px;
width: 200px;
overflow: scroll;
white-space: nowrap;
}
.divScroll-3 {
height: 100px;
width: 200px;
overflow: scroll;
white-space: nowrap;
}
.divScrollAuto {
height: 100px;
width: 200px;
overflow: auto;
white-space: nowrap;
}
.divScrollHidden {
height: 100px;
width: 200px;
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<h3>Vertical Overflow Scroll</h3>
<div class="divScroll-1">
Demo text for CSS overflow scroll property with text wrap by default.<br />
Demo text for CSS overflow scroll property with text wrap by default.<br />
Demo text for CSS overflow scroll property with text wrap by default.<br />
Demo text for CSS overflow scroll property with text wrap by default
</div>
<h3>Horizontal Overflow Scroll</h3>
<div class="divScroll-2">
Demo text for CSS overflow scroll property with nowrap<br />
Demo text for CSS overflow scroll property with nowrap<br />
Demo text for CSS overflow scroll property with nowrap<br />
Demo text for CSS overflow scroll property with nowrap
</div>
<h3>Both Vertical and Horizontal Overflow Scroll</h3>
<div class="divScroll-3">
Demo text for CSS overflow scroll property with nowrap<br />
Demo text for CSS overflow scroll property with nowrap<br />
Demo text for CSS overflow scroll property with nowrap<br />
Demo text for CSS overflow scroll property with nowrap<br />
Demo text for CSS overflow scroll property with nowrap<br />
Demo text for CSS overflow scroll property with nowrap
</div>
<h3>Overflow Auto</h3>
<div class="divScrollAuto">
Demo text for CSS overflow auto property with nowrap<br />
Demo text for CSS overflow auto property with nowrap<br />
Demo text for CSS overflow auto property with nowrap<br />
Demo text for CSS overflow auto property with nowrap
</div>
<h3>Overflow Hidden</h3>
<div class="divScrollHidden">
Demo text for CSS overflow hidden property with nowrap<br />
Demo text for CSS overflow hidden property with nowrap<br />
Demo text for CSS overflow hidden property with nowrap<br />
Demo text for CSS overflow hidden property with nowrap
</div>
</body>
</html>
Output:
Get the output of above discussed code from the following links:
Div Overflow Vertical Scrollbar
Div Overflow Horizontal Scrollbar
Continue to the next tutorial: HTML Div CSS Style Float to learn CSS float property and its use with Div overlays.
