HTML and CSS Reference
In-Depth Information
he overflow property is part of CSS2.1. The other two properties are part of CSS3, but are supported by all
browsers in current use (including IE 6). All three properties accept the values listed in Table 6-9 .
Table 6-9. Values Accepted by Overflow Properties
Value
Description
visible
The content flows outside the box.
hidden
Content that is too big is clipped. No scrollbars are provided.
scroll
Content that is too big is clipped. Scrollbars are provided, even if not needed.
auto
Scrollbars should be provided if the content is too big, but actual implementation is left up to
the browser.
The overflow properties are not inherited, so you can also use the inherit keyword. In CSS3, it's proposed
that overflow should be a shorthand property for overflow-x and overflow-y . If one value is supplied, it applies
to both horizontal and vertical overflow. If two values are supplied, the first should apply to horizontal overflow,
and the second to vertical overflow.
At the time of this writing, browsers support overflow with only a single value. Using two values results
in the style rule being ignored. if you need to apply different values to horizontal and vertical overflow, set overflow-x
and overflow-y independently.
Caution
The ch06 folder contains six files that show how the overflow properties work. Each file contains five <div>
elements that are 150px wide and 200px high with a solid red border. To demonstrate the difference between text,
which wraps automatically, and images, the <div> elements in three files contain only text. The remaining files
contain a mixture of text and images.
In overflow.html and overflow_image.html, the overflow property has the following effects:
overflow is set to auto and the content is smaller than the box, no scrollbars are
generated.
When
overflow is set to auto and the content is larger than the box, text generates only
a vertical scrollbar. Because images can't be wrapped, both horizontal and vertical
scrollbars are generated when necessary.
When
overflow is set to hidden , no scrollbars are generated. Excess content is
inaccessible.
When
overflow is set to scroll , horizontal and vertical scrollbars are always generated.
When
overflow is set to visible , excess content overlaps the box.
This is exactly what you would expect from the descriptions in Table 6-9 . However, using overflow-x and
overflow-y on their own produces some surprising results. Figure 6-22 shows how browsers handle overflow-x
with text.
When
 
 
Search WWH ::




Custom Search