Scrolling Text Blocks

The overflow property can be used to create scrollbars on a block-level element, allowing the placement of large amounts of text within a confined space. The following values are available:

• visible: This value indicates that content is not clipped, i.e., it may be rendered outside the block box.
• hidden: This value indicates that the content is clipped and that no scrolling user interface should be provided to view the content outside the clipping region.
• scroll: This value indicates that the content is clipped and that if the user agent uses a scrolling mechanism that is visible on the screen (such as a scroll bar or a panner), that mechanism should be displayed for a box whether or not any of its content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. When this value is specified and the target medium is 'print', overflowing content may be printed.
• auto: The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.

The CSS code for this page looks like this:

body
{
}
pre
{
	height:10em;
	width:20em;
	overflow:auto;
	background-color:#eee9dd;
	border-style:outset;
	border-color:green;
	padding:5px;
}
a
{
	text-decoration:none;
	color:blue;
}
a:link
{
}
a:visited
{
	color:purple;
}
a:hover
{
	text-decoration:underline;
}
a:active, a:focus
{
	color:green;
}

The code box above is created using the </pre> tag.

Note that the code box also has its border-style property set to outset. These values are available:

• none: No border; the border width is zero.
• hidden: Same as 'none', except in terms of border conflict resolution for table elements.
• dotted: The border is a series of dots.
• dashed: The border is a series of short line segments.
• solid: The border is a single line segment.
• double: The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.
• groove: The border looks as though it were carved into the canvas.
• ridge: The opposite of 'groove': the border looks as though it were coming out of the canvas.
• inset: The border makes the box look as though it were embedded in the canvas.
• outset: The opposite of 'inset': the border makes the box look as though it were coming out of the canvas.