overflow

  • Adressname der Version: CSS/overflow
  • Titel der Version: overflow
  • ID der Version: 112261
  • Erstellt:
  • Autor: fscholz
  • Aktuelle Version? Nein
  • Kommentar Hinweise; 39 words added

Inhalt der Version

{{ CSSRef() }}

Übersicht:

Die overflow Eigenschaft legt fest, ob Inhalte aus einem Element hinausragen dürfen oder, ob Scrollbalken beim Überlauf zum Einsatz kommen.

  • Standardwert: visible
  • Anwendbar auf: block, inline und table-cell Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: wie festgelegt

Syntax

overflow: visible | hidden | scroll | auto | inherit

Werte

visible
Standardwert. Der Inhalt wird nicht abgeschnitten und kann aus dem Element hinausragen.
hidden
Der Inhalt wird abgeschnitten und es werden keine Scrollbalken angezeigt.
scroll
Es werden immer Scrollbalken angezeigt, auch wenn der Inhalt nicht überläuft.
auto
Hängt vom Browser ab. Firefox stellt Scrollbalken zur Verfügung, wenn der Inhalt überläuft.
inherit
Der Wert des Elternelements wird geerbt.

Mozilla Erweiterungen

-moz-scrollbars-none
{{ obsolete_inline() }}  stattdessen overflow:hidden
-moz-scrollbars-horizontal
{{ Deprecated_inline() }} Verwendung von overflow-x und overflow-y wird bevorzugt.
-moz-scrollbars-vertical
{{ Deprecated_inline() }} Verwendung von overflow-x und overflow-y wird bevorzugt.
-moz-hidden-unscrollable
Deaktiviert das Scrollen für das Wurzelelement (<html>, <body>) und ist nur für interne Zwecke gedacht (z.B. Themes).

Beispiele

p {  
     width: 12em;
     height: 6em;
     border: dotted;
     overflow: auto;   /* Scrollbalken erscheinen nur wenn nötig */ 
}

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
wenig Text

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

Hinweise

Bis einschließlich Gecko 1.9.2 (Firefox 3.6), war die overflow Eigenschaft fälschlicherweise auch für Tabellengruppen verfügbar (<thead> , <tbody> , <tfoot>). Dieses Verhalten wurde in späteren Versionen korrigiert.

Browser Kompatibilität

Browser ab Version
Internet Explorer 4.0 [*]
Firefox (Gecko) 1.0 (1.0)
Opera 4.0-7.0
Safari (WebKit) 1.1 (85)

[*] Der Internet Explorer von Version 4 bis 6 vergrößert das Element, wenn overflow:visible gesetzt ist, damit der Inhalt hinein passt.
Dadurch verhalten sich height/width wie min-height/min-width.

Spezifikation

Siehe auch

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

Quelltext der Version

<p>{{ CSSRef() }}</p>
<h3 id="Übersicht:">Übersicht:</h3>
<p>Die <code>overflow</code> Eigenschaft legt fest, ob Inhalte aus einem Element hinausragen dürfen oder, ob Scrollbalken beim Überlauf zum Einsatz kommen.</p>
<ul> <li>Standardwert: visible</li> <li>Anwendbar auf: block, inline und table-cell Elemente</li> <li>Vererbbar: Nein</li> <li>Prozentwerte: Nein</li> <li>Medium: visuell</li> <li>berechneter Wert: wie festgelegt</li>
</ul>
<h3 id="Syntax">Syntax</h3>
<pre class="eval">overflow: visible | hidden | scroll | auto | inherit
</pre>
<h3 id="Werte">Werte</h3>
<dl> <dt>visible</dt> <dd>Standardwert. Der Inhalt wird nicht abgeschnitten und kann aus dem Element hinausragen.</dd> <dt>hidden</dt> <dd>Der Inhalt wird abgeschnitten und es werden keine Scrollbalken angezeigt.</dd> <dt>scroll</dt> <dd>Es werden immer Scrollbalken angezeigt, auch wenn der Inhalt nicht überläuft.</dd> <dt>auto</dt> <dd>Hängt vom Browser ab. Firefox stellt Scrollbalken zur Verfügung, wenn der Inhalt überläuft.</dd> <dt>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd>
</dl>
<h4 id="Mozilla_Erweiterungen">Mozilla Erweiterungen</h4>
<dl> <dt>-moz-scrollbars-none</dt> <dd>{{ obsolete_inline() }}  stattdessen overflow:hidden</dd> <dt>-moz-scrollbars-horizontal</dt> <dd>{{ Deprecated_inline() }} Verwendung von <a href="/de/CSS/overflow-x" title="de/CSS/overflow-x"><code>overflow-x</code></a> und <a href="/de/CSS/overflow-y" title="de/CSS/overflow-y"><code>overflow-y</code></a> wird bevorzugt.</dd> <dt>-moz-scrollbars-vertical</dt> <dd>{{ Deprecated_inline() }} Verwendung von <a href="/de/CSS/overflow-x" title="de/CSS/overflow-x"><code>overflow-x</code></a> und <a href="/de/CSS/overflow-y" title="de/CSS/overflow-y"><code>overflow-y</code></a> wird bevorzugt.</dd> <dt>-moz-hidden-unscrollable</dt> <dd>Deaktiviert das Scrollen für das Wurzelelement (&lt;html&gt;, &lt;body&gt;) und ist nur für interne Zwecke gedacht (z.B. Themes).</dd>
</dl>
<h3 id="Beispiele">Beispiele</h3>
<pre>p {  
     width: 12em;
     height: 6em;
     border: dotted;
     overflow: auto;   /* Scrollbalken erscheinen nur wenn nötig */ 
}

<p style="overflow:hidden;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;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;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;width:12em;height:6em;border:dotted"><code>overflow: auto</code><br> wenig Text</p>
<p style="overflow:visible;width:12em;height:6em;border:dotted"><code>overflow: visible</code><br> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p></pre>
<h3 id="Hinweise">Hinweise</h3>
<p>Bis einschließlich Gecko 1.9.2 (Firefox 3.6), war die <code>overflow</code> Eigenschaft fälschlicherweise auch für Tabellengruppen verfügbar (<code>&lt;thead&gt;</code> , <code>&lt;tbody&gt;</code> , <code>&lt;tfoot&gt;</code>). Dieses Verhalten wurde in späteren Versionen korrigiert.</p>
<h3 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0 [*]</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>4.0-7.0</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.1 (85)</td> </tr> </tbody>
</table>
<p>[*] Der Internet Explorer von Version 4 bis 6 vergrößert das Element, wenn <code>overflow:visible</code> gesetzt ist, damit der Inhalt hinein passt. <br>
Dadurch verhalten sich <code>height/width</code> wie <code>min-height/min-width</code>.</p>
<h3 id="Spezifikation">Spezifikation</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/visufx.html#overflow">CSS 2.1 Visual effects #overflow</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-box/#overflow">CSS 3 Box #overflow</a> (Working Draft)</li>
</ul>
<h3 id="Siehe_auch">Siehe auch</h3>
<ul> <li><a href="/de/CSS/overflow-x" title="de/CSS/overflow-x">overflow-x</a>, <a href="/de/CSS/overflow-y" title="de/CSS/overflow-y">overflow-y</a></li>
</ul>
<p>{{ languages( { "en": "en/CSS/overflow" } ) }}</p>
Zu dieser Version zurücksetzen