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 )
Search WWH ::

Custom Search