HTML and CSS Reference
In-Depth Information
Horizontal Overfl ow and White Space
Scroll bars for overfl ow content are usually placed vertically so that you scroll down to
view the extra content. In some page layouts, however, you may want to view content in
a horizontal rather than a vertical direction. You can accomplish this by adding the fol-
lowing style properties to the element:
overflow: auto;
white-space: nowrap;
The
white-space
property defi nes how browsers should handle white space in the
rendered document. The default is to collapse consecutive occurrences of white space
into a single blank space, and to automatically wrap text to a new line if it extends
beyond the width of the container. However, you can set the
white-space
property of
the element to
nowrap
to keep inline content on a single line, preventing line wrapping.
With the contents thus confi ned to a single line, browsers will display only horizontal
scroll bars for the overfl ow content. Other values of the
white-space
property include
normal
(for default handling of white space),
pre
(to preserve all white space from the
HTML fi le), and
pre-wrap
(to preserve white space but to wrap excess content to a
new line).
Clipping an Element
Closely related to the
overflow
property is the
clip
property, which allows you to defi ne
a rectangular region through which an element's content can be viewed. Anything that
lies outside the boundary of the rectangle is hidden. The syntax of the
clip
property is
clip: rect(
top
,
right
,
bottom
,
left
);
where
top
,
right
,
bottom
, and
left
defi ne the coordinates of the clipping rectangle.
For example, a clip value of
rect(10, 175, 125, 75)
defi nes a clip region whose top
and bottom edges are 10 and 125 pixels from the top of the element, and whose right
and left edges are 175 and 75 pixels from the left side of the element. See Figure 4-72.
Figure 4-72
Clipping an element
75 pixels
10 pixels
125 pixels
175 pixels
full element
clip: rect(
10
,
175
,
125
,
75
)