CSS3 Examples

CSS OVERFLOW-X

Written by jon on 11:23 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-x’ property describes what to do with the content that exceeds the element’s width.

Example

blockquote { width: 50px; height: 50px; overflow-x: scroll } <blockquote style=”width: 50px; height: 50px; overflow-x: scroll”>some text</blockquote>

Possible Values

Value Description 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 a horizontal scrollbar is 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 horizontal scrollbar if possible in case of overflow.