CSS3 Examples

CSS OVERFLOW

Written by jon on 11:21 PM 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.