16.2.6 Partial Visibility: overflow and clip
The visibility property allows you to completely hide a document element. The overflow and clip properties allow you to display only part of an element. The over flow property specifies what happens when the content of an element exceeds the size specified (with the width and height style properties, for example) for the element. The allowed values and their meanings for this property are as follows:
Content may overflow and be drawn outside of the element’s box if necessary. This is the default.
Content that overflows is clipped and hidden so that no content is ever drawn outside the region defined by the size and positioning properties.
The element’s box has permanent horizontal and vertical scrollbars. If the content exceeds the size of the box, the scrollbars allow the user to scroll to view the extra content. This value is honored only when the document is displayed on a computer screen; when the document is printed on paper, for example, scrollbars obviously do not make sense.
Scrollbars are displayed only when content exceeds the element’s size rather than being permanently displayed.
While the overflow property allows you to specify what happens when an element’s content is bigger than the element’s box, the clipproperty allows you to specify exactly which portion of an element should be displayed, whether or not the element overflows. This property is especially useful for scripted effects in which an element is progressively displayed or uncovered.
The value of the clip property specifies the clipping region for the element. In CSS2, clipping regions are rectangular, but the syntax of the clip property leaves open the possibility that future versions of the standard will support clipping shapes other than rectangles. The syntax of the clip property is:
rect(top right bottom left)
The top, right, bottom, and leftvalues specify the boundaries of the clipping rectangle relative to the upper-left corner of the element’s box. For example, to display only a 100 × 100-pixel portion of an element, you can give that element this style attribute:
style="clip: rect(0px 100px 100px 0px);"
Note that the four values within the parentheses are length values and must include a unit specification, such as px for pixels. Percentages are not allowed. Values can be negative to specify that the clipping region extends beyond the box specified for the element. You can also use the auto keyword for any of the four values to specify that the edge of the clipping region is the same as the corresponding edge of the element’s box. For example, you can display just the leftmost 100 pixels of an element with this style attribute:
style="clip: rect(auto 100px auto auto);"