CSS OVERFLOW
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
}
some text
Possible Values
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.
8 Responses
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.
We need a overflow:wrap property so elements inside a div with that property to be wrapped inside it without breaking out of or stretching the div.
Also an overflow:adapt would be good so the div would stretched to fit the content inside it.
max-width?
http://www.css3.com/css-text-overflow/
I wish there was an overflow option that was the exact opposite of overflow:scroll, which would render the overflow content, without increasing the page’s scroll height to include it. It’s helpful when the window is sized taller than the length of the page, and you want the user to see something other than then page body’s background image down there.
I’m having a similar problem with overflow: auto; and CSS Scrolling.
Basically the whole PAGE extends to the length of the div that was supposed to be cut.
Scroll bars do appear in the div with style=”overflow: auto; height: 150px”.
However the entire page is stretched, regardless of any additional options like max-height. Simply empty space fills the remainder of the page, as if the div was its original (un-overflow-restricted) height.
@ex
overflow:wrap is a simple and good idea. I thought it already existed, but when I checked by googling I arrived here.
Kevin Dixon
opera has had a button to “Fit to Window Width” since o8 (oe earlier?)
i don’t think other browsers have it, despite that side scrolling is such a common annoyance.
I arrived here, because I’ve been trying combinations of body, html max-widths.. with width:auto, plus some other attempts with overflow applied to common elements on offending pages (table, tbody, tr, td on forum threads)