overflow Attribute | overflow Property

DHTML, HTML, & CSS

overflow Attribute | overflow Property


Sets or retrieves how to manage the content of the object when the content exceeds the height and/or width of the object.

Syntax

HTML{ overflow: sOverflow }
Scriptingobject.style.overflow [ = sOverflow ]

Possible Values

sOverflow String that specifies one of the following values:
visibleContent is not clipped, and scroll bars are not added.
scrollContent is clipped, and scroll bars are added even if the content does not exceed the dimensions of the object.
hiddenContent that exceeds the dimensions of the object is not shown.
autoContent is clipped, and scrolling is added only when necessary.

The property is read/write with a default value of visible; the cascading style sheets (CSS) attribute is not inherited.

Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see dynamic propertiesInternet Link.

Remarks

The default value for the BODY element is auto.

For the TEXTAREA object, only the hidden value is valid. Setting the overflow property to hidden on a TEXTAREA object hides its scroll bars.

The default value for the TABLE element is hidden.

As of Internet Explorer 5, the TD element supports the overflow property, with a default value of hidden, if the tableLayout property for the parent TABLE is set to fixed. In a fixed table layout, content that exceeds the dimensions of the cell is clipped if the overflow property is set to either hidden, scroll, or auto. Otherwise, setting the value of the overflow property to visible causes the extra text to overflow into the right neighboring cell (or left if the direction property is set to rtl), continuing until the end of the row.

Setting the overflow property to visible causes the content to clip to the size of the window or frame that contains the object.

This property is available on the Macintosh® platform as of Internet Explorer 5.

Example

The following examples use the overflow attribute and the overflow property to manage content of the object.

This example uses an inline style to automatically adjust itself to overflowing content when the page is loaded.

Sample Code

<DIV ID=oDiv STYLE="width: 200px; height: 200px; overflow: auto;">
:
</DIV>

This example allows the user to dynamically change the overflow property of a DIV object by choosing one of the possible overflow values from a SELECT object.

<SCRIPT>
function SetOverflow(o, sValue)
{
    o.style.overflow = sValue;
}
</SCRIPT>

<DIV ID="div1" 
    STYLE="font-size:18pt;background-color:yellow;height:50px;width:75px">
The quick brown fox jumped over the lazy dog.
</DIV>

<SELECT onchange="SetOverflow(div1,
    this.options[this.selectedIndex].text)">
<OPTION SELECTED>visible
<OPTION>scroll
<OPTION>hidden
<OPTION>auto
</SELECT>
This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Applies To

[ Object Name ]
PlatformVersion
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.
A, ACRONYM, ADDRESS, APPLET, B, BDO, BIG, BLOCKQUOTE, BODY, CENTER, CITE, CODE, currentStyle, custom, DD, DEL, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, Hn, I, INS, KBD, LABEL, LEGEND, LI, LISTING, MENU, OL, P, PLAINTEXT, PRE, Q, RT, RUBY, runtimeStyle, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TD, TEXTAREA, TT, U, UL, VAR, XMP

See Also

overflowX, overflowY, position


Back to topBack to top

Did you find this topic useful? Suggestions for other topics? write us!Internet Link

© 1999 microsoft corporation. all rights reserved. terms of useInternet Link.