Some content in an element may fall outside the element’s rendering box for a number of reasons (negative margins, absolute positioning, content exceeding the width/height set for an element, etc.) In cases where this occurs, the ‘overflow’ property describes what to do with the content outside the elements rendering area.
Example
| blockquote { width: 50px; height: 50px; overflow: scroll }
<blockquote style=”width: 50px; height: 50px; overflow: scroll”>some text</blockquote> |
Possible Values
| Value | Description |
|---|---|
| inherit | Explicitly sets the value of this property to that of the parent. |
| visible | Content is not clipped and may be rendered outside of the element’s box. |
| hidden | Content is clipped and content outside of the element’s box is not visible. The size of the clipping region is defined by the ‘clip’ property. |
| scroll | Content is clipped as necessary, but scrollbars are made available where necessary to view the additional, non-visible content. If the Visual media in use is static (such as Print) the content should be treated as if the value was ‘visible’. |
| auto | This value is browser and media dependent, but should allow for a scrollbar if possible in case of overflow. |
April 7th, 2008 at 11:50 pm
Hi do you know how to control overflow? so for example if the overflow is both with and hight how to control the overflow so the hight overflow is scroll/auto and the width is not.