mozilla

Revision 5535 of overflow

  • Revision slug: CSS/overflow
  • Revision title: overflow
  • Revision id: 5535
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment cleanup; 7 words added, 11 words removed

Revision Content

{{ CSSRef() }}

Summary

The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.

  • {{ Xref_cssinitial() }}: {{ Cssxref("visible") }}
  • Applies to: block and inline-block elements, table cells
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

overflow:  visible | hidden | scroll | auto | {{ cssxref("inherit") }}

Values

visible
Default value. Content is not clipped, it may be rendered outside the content box.
hidden
The content is clipped and no scrollbars are provided.
scroll
The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.
auto
Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows.

Mozilla Extensions

-moz-scrollbars-none"
{{ obsolete_inline() }} Use overflow:hidden instead.
-moz-scrollbars-horizontal
{{ Deprecated_inline() }} Use of {{ Cssxref("overflow-x") }} and {{ Cssxref("overflow-y") }} is preferred.
-moz-scrollbars-vertical
{{ Deprecated_inline() }} Use of {{ Cssxref("overflow-x") }} and {{ Cssxref("overflow-y") }} is preferred.
-moz-hidden-unscrollable
Is intended mainly for internal use and by themes. Disables scrolling of XML root elements and <html>, <body> by arrow keys and mouse wheel.

Examples

p {  
     width: 12em;
     border: dotted;
     overflow: auto;   /* append scrollbars if necessary */ 
}

overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

overflow: auto
short text

visible (default)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Notes

Through Gecko 1.9.2 (Firefox 3.6), the overflow property is incorrectly applied to table-group elements (<thead> , <tbody> , <tfoot>). This behavior is corrected in later versions.

Browser compatibility

Browser Lowest version
Internet Explorer 4.0 [*]
Firefox (Gecko) 1.0 (1.0)
Opera 4.0-7.0
Safari (WebKit) 1.0 (85)

[*] IE 4-6 enlarges an element with overflow:visible (default value) to fit the content in it. height/width behaves like min-height/min-width.

Specifications

See also

{{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("clip") }}, {{ Cssxref("display") }}

{{ languages( {"de": "de/CSS/overflow" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> overflow </code>CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("visible") }}</li> <li>Applies to: block and inline-block elements, table cells</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h3>Syntax</h3>
<pre class="eval">overflow:  visible | hidden | scroll | auto | {{ cssxref("inherit") }}</pre>
<h3>Values</h3>
<dl> <dt>visible</dt> <dd>Default value. Content is not clipped, it may be rendered outside the content box.</dd> <dt>hidden</dt> <dd>The content is clipped and no scrollbars are provided.</dd> <dt>scroll</dt> <dd>The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.</dd> <dt>auto</dt> <dd>Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows.</dd>
</dl>
<h4>Mozilla Extensions</h4>
<dl> <dt>-moz-scrollbars-none"</dt> <dd>{{ obsolete_inline() }} Use<code> overflow:hidden </code>instead.</dd> <dt>-moz-scrollbars-horizontal</dt> <dd>{{ Deprecated_inline() }} Use of {{ Cssxref("overflow-x") }} and {{ Cssxref("overflow-y") }} is preferred.</dd> <dt>-moz-scrollbars-vertical</dt> <dd>{{ Deprecated_inline() }} Use of {{ Cssxref("overflow-x") }} and {{ Cssxref("overflow-y") }} is preferred.</dd> <dt>-moz-hidden-unscrollable</dt> <dd>Is intended mainly for internal use and by themes. Disables scrolling of XML root elements<span style="font-family: monospace;"> and</span><code> &lt;html&gt;</code>,<code> &lt;body&gt; </code>by arrow keys and mouse wheel.</dd>
</dl>
<h3>Examples</h3>
<pre>p {  
     width: 12em;
     border: dotted;
     overflow: auto;   /* append scrollbars if necessary */ 
}</pre>
<p style="overflow:hidden;display:inline-block;width:12em;height:6em;border:dotted"><code>overflow: hidden</code><br>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<p style="overflow:scroll;display:inline-block;width:12em;height:6em;border:dotted"><code>overflow: scroll</code><br>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<p style="overflow:auto;display:inline-block;width:12em;height:6em;border:dotted"><code>overflow: auto</code><br>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<p style="overflow:auto;display:inline-block;width:12em;height:6em;border:dotted"><code>overflow: auto</code><br>
short text</p>
<p style="overflow:visible;display:inline-block;width:12em;height:6em;border:dotted"><code>visible</code> (default)<br>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<h3>Notes</h3>
<p>Through Gecko 1.9.2 (Firefox 3.6), the<code> overflow </code>property is incorrectly applied to table-group elements (<code>&lt;thead&gt;</code> , <code>&lt;tbody&gt;</code> , <code>&lt;tfoot&gt;</code>). This behavior is corrected in later versions.</p><h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> </tr> <tr> <td>Internet Explorer</td> <td><strong>4.0</strong> [*]<strong><br> </strong></td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>1.0</strong> (1.0)</td> </tr> <tr> <td>Opera</td> <td>4.0-<strong>7.0</strong></td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>1.0</strong> (85)</td> </tr> </tbody>
</table>
<p>[*] IE 4-6 enlarges an element with<code> overflow:visible </code>(default value) to fit the content in it.<code> height/width </code>behaves like<code> min-height/min-width</code>.</p>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/visufx.html#overflow">CSS 2.1 Visual effects #overflow</a></li>
</ul>
<h3>See also</h3>
<p>{{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("clip") }}, {{ Cssxref("display") }}</p>
<p>{{ languages( {"de": "de/CSS/overflow" } ) }}</p>
Revert to this revision