Overflow Settings

This CSS Reference section displays the code for example that illustrate the different CSS overflow settings for a block element: visible, hidden, scroll, and auto.

The visible setting is the default and displays all of the content, whether or not it fits within the block element; in this case, the content may appear outside the bounds of the element.
The hidden value hides any content that would extend beyond the bound of the element. However it allows for programatic scrolling by setting scrollLeft or calling ScrollTo().
The scroll value puts scroll bars on the bottom and right sides of the element to allow the viewing of extended content. The scrollbars appear in this case, whether they are needed or not.
The auto value adds scrollbars to the bottom or right sides, but it only adds them when the content extends outside the element area.
The clip value acts exactly like the hidden value, except that it does not allow programatic scrolling.

OverflowSettings.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's CSS</title>
    <style type="text/css">
      .cOverFlow {
        width:300px;
        height:160px;
        padding:10px;
        margin:30px;
        border:5px solid #444444;
        background-color:#DDDDDD;
      }
    </style>
  </head>
  <body>
    <h3>overflow: visible</h3>
    <div class="cOverFlow" style="overflow:visible;">
			(Proverbs 30:11-14) "There is a generation that curseth their father, and doth not bless their mother. A generation that are pure in their own eyes, and yet are not washed from their filthiness. A generation, whose eyes are lofty, and their eyelids lifted up on high. A generation, that for teeth hath swords, and grindeth with their jaw teeth, to devour the needy from off the earth, and the poor from among men."
		</div>
    <h3>overflow: hidden</h3>
    <div class="cOverFlow" style="overflow:hidden;">
			(Proverbs 30:11-14) "There is a generation that curseth their father, and doth not bless their mother. A generation that are pure in their own eyes, and yet are not washed from their filthiness. A generation, whose eyes are lofty, and their eyelids lifted up on high. A generation, that for teeth hath swords, and grindeth with their jaw teeth, to devour the needy from off the earth, and the poor from among men."
		</div>
    <h3>overflow: scroll</h3>
    <div class="cOverFlow" style="overflow:scroll;">
			(Proverbs 30:11-14) "There is a generation that curseth their father, and doth not bless their mother. A generation that are pure in their own eyes, and yet are not washed from their filthiness. A generation, whose eyes are lofty, and their eyelids lifted up on high. A generation, that for teeth hath swords, and grindeth with their jaw teeth, to devour the needy from off the earth, and the poor from among men."
		</div>
		<h3>overflow: auto</h3>
    <div class="cOverFlow" style="overflow:auto;">
			(Proverbs 30:11-14) "There is a generation that curseth their father, and doth not bless their mother. A generation that are pure in their own eyes, and yet are not washed from their filthiness. A generation, whose eyes are lofty, and their eyelids lifted up on high. A generation, that for teeth hath swords, and grindeth with their jaw teeth, to devour the needy from off the earth, and the poor from among men."
		</div>
		<h3>overflow: clip</h3>
    <div class="cOverFlow" style="overflow:clip;">
			(Proverbs 30:11-14) "There is a generation that curseth their father, and doth not bless their mother. A generation that are pure in their own eyes, and yet are not washed from their filthiness. A generation, whose eyes are lofty, and their eyelids lifted up on high. A generation, that for teeth hath swords, and grindeth with their jaw teeth, to devour the needy from off the earth, and the poor from among men."
		</div>
  </body>
</html>

Output

overflow: visible

(Proverbs 30:11-14) "There is a generation that curseth their father, and doth not bless their mother. A generation that are pure in their own eyes, and yet are not washed from their filthiness. A generation, whose eyes are lofty, and their eyelids lifted up on high. A generation, that for teeth hath swords, and grindeth with their jaw teeth, to devour the needy from off the earth, and the poor from among men."