HTML and CSS Reference
In-Depth Information
Figure 4-69
Values of the overfl ow property
visible
box extends to
make all of the
overflow visible
hidden
overflow content is
hidden from users
scroll
browsers add scroll
bars to the box
auto
scroll bars are added
only where needed
Working with Content Overflow and Clipping
• To specify how browsers should handle content that overflows an element's boundary,
use the style
overflow:
type
;
where
type
is
visible
(to expand the element height to match the content),
hidden
(to hide the excess content),
scroll
(to always display horizontal and vertical scroll
bars), or
auto
(to display scroll bars if needed).
• To specify how browsers should handle content that overflows in the horizontal direc-
tion, use the following style:
overflow-x:
type
;
• To specify how browsers should handle content that overflows in the vertical direction,
use the following style:
overflow-y:
type
;
• To clip an element's content, use the style
clip: rect(
top
,
right
,
bottom
,
left
);
where
top
,
right
,
bottom
, and
left
define the boundaries of the clipping rectangle.
You decide to limit the height of the
aside
element to 450 pixels and to set the
overflow
property to
auto
so that browsers display scroll bars as needed.
