Version 112255 von overflow

  • Adressname der Version: CSS/overflow
  • Titel der Version: overflow
  • ID der Version: 112255
  • Erstellt:
  • Autor: Jürgen Jeka
  • Aktuelle Version? Nein
  • Kommentar 30 words added, 2 words removed
Schlagwörter: 

Inhalt der Version

{{ outdated('Aktueller ist die englische Dokumentation: /en/CSS/min-height') }}

Übersicht

Die Eigenschaft Overflow gibt an ob der Inhalt des Elements über das Element hinausragen darf. Seit CSS 3 ist sie eine Kurzform für overflow-x und overflow-y

Standardwert
visible
Anwendbar auf
Alle Elemente
Geerbt
Nein
Medium
visual
Werte
visible | hidden | scroll | auto | no-display | no-content | inherit
ab CSS-Version
CSS2.1, CSS3

Syntax

CSS 2.1:

visible | hidden | scroll | auto | inherit

CSS 3:

[ visible | hidden | scroll | auto | no-display | no-content ]{1,2}

Werte

visible
wenn das Element Inhalt besitzt, der zu groß ist, ragt er über den Elementrand hinaus
hidden
übergroßer Inhalt wird am Rahmen abgeschnitten
scroll
Das Element besitzt innerhalb des Rahmens Scrollleisten
auto
Wie scroll, nur werden die Scrollleisten nicht angezeigt, wenn der Platz reicht um den Inhalt anzuzeigen
no-display (CSS 3)
wenn der Inhalt nicht in das Element passt, wird es nicht angezeigt (wie display:none)
no-content (CSS 3)
wenn der Inhalt nicht in das Element passt, wird es versteckt (wie visibility:hidden)
inherit
Der Browser verwendet den Wert des Elternelements.

Beispiele

Ergebnis Quelltext

extrem_langes_Wort_extrem_langes_Wort

overflow:visible

extrem_langes_Wort_extrem_langes_Wort

overflow:hidden

extrem_langes_Wort_extrem_langes_Wort

overflow:scroll

extrem_langes_Wort_extrem_langes_Wort

overflow:auto

Browser-Kompatibilität

todo gelb:#FFF53A;rot:#FF785A

   IE
   Netscape
   Opera
   Firefox
   Konqueror
   Netscape
   Opera
   Firefox
   Konqueror

Siehe auch

visibility

Quelltext der Version

<p>{{ outdated('Aktueller ist die englische Dokumentation: <a href='\"/en/CSS/min-height\"'>/en/CSS/min-height</a>') }}</p>
<div class="breadcrumbs">
<table width="100%"> <tbody> <tr> <td style="width:33%;text-align:left">← <a href="/de/CSS/outline" title="de/CSS/outline">outline</a></td> <td style="width:33%;text-align:center">↑ <a href="/de/CSS_Referenz" title="de/CSS_Referenz">CSS Referenz</a> ↑</td> <td style="width:33%;text-align:right"><a href="/de/CSS/padding" title="de/CSS/padding">padding</a> →</td> </tr> </tbody>
</table>
</div>
<div class="breadcrumbs">Kurzform für: <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></div>
<h3>Übersicht</h3>
<p>Die Eigenschaft Overflow gibt an ob der Inhalt des Elements über das Element hinausragen darf. Seit CSS 3 ist sie eine Kurzform für <a href="/de/CSS/overflow-x" title="de/CSS/overflow-x">overflow-x</a> und <a href="/de/CSS/overflow-y" title="de/CSS/overflow-y">overflow-y</a></p>
<dl> <dt>Standardwert</dt> <dd> visible </dd> <dt>Anwendbar auf</dt> <dd> Alle Elemente </dd> <dt>Geerbt</dt> <dd> Nein </dd> <dt>Medium</dt> <dd> visual </dd> <dt>Werte</dt> <dd> visible | hidden | scroll | auto | <em>no-display</em> | <em>no-content</em> | inherit </dd> <dt>ab CSS-Version</dt> <dd> CSS2.1, CSS3 </dd>
</dl>
<h3>Syntax</h3>
<p>CSS 2.1:</p>
<pre>visible | hidden | scroll | auto | inherit</pre>
<p>CSS 3:</p>
<pre>[ visible | hidden | scroll | auto | no-display | no-content ]{1,2}</pre>
<h3>Werte</h3>
<dl> <dt>visible </dt> <dd>wenn das Element Inhalt besitzt, der zu groß ist, ragt er über den Elementrand hinaus </dd> <dt>hidden </dt> <dd>übergroßer Inhalt wird am Rahmen abgeschnitten </dd> <dt>scroll </dt> <dd>Das Element besitzt innerhalb des Rahmens Scrollleisten </dd> <dt>auto </dt> <dd>Wie <code>scroll</code>, nur werden die Scrollleisten nicht angezeigt, wenn der Platz reicht um den Inhalt anzuzeigen </dd> <dt>no-display (CSS 3) </dt> <dd>wenn der Inhalt nicht in das Element passt, wird es nicht angezeigt (wie display:none) </dd> <dt>no-content (CSS 3) </dt> <dd>wenn der Inhalt nicht in das Element passt, wird es versteckt (wie visibility:hidden) </dd> <dt>inherit </dt> <dd>Der Browser verwendet den Wert des Elternelements. </dd>
</dl>
<h3>Beispiele</h3>
<table class="standard-table" style="width:100%"> <tbody> <tr> <td class="header" width="50%">Ergebnis</td> <td class="header">Quelltext</td> </tr> <tr> <td> <div style="border:1px solid black;overflow:visible;width:150px"> <p>extrem_langes_Wort_extrem_langes_Wort</p> </div> </td> <td> <pre>
overflow:visible</pre> </td> </tr> <tr> <td> <div style="border:1px solid black;overflow:hidden;width:150px"> <p>extrem_langes_Wort_extrem_langes_Wort</p> </div> </td> <td> <pre>
overflow:hidden</pre> </td> </tr> <tr> <td> <div style="border:1px solid black;overflow:scroll;width:150px"> <p>extrem_langes_Wort_extrem_langes_Wort</p> </div> </td> <td> <pre>
overflow:scroll</pre> </td> </tr> <tr> <td> <div style="border:1px solid black;overflow:auto;width:150px"> <p>extrem_langes_Wort_extrem_langes_Wort</p> </div> </td> <td> <pre>
overflow:auto</pre> </td> </tr> </tbody>
</table>
<h3>Browser-Kompatibilität</h3>
<p>todo <span class="comment">gelb:#FFF53A;rot:#FF785A</span></p>
<pre class="eval">   <span class="comment">IE</span>
</pre><pre class="eval">   <span class="comment">Netscape</span>
</pre><pre class="eval">   <span class="comment">Opera</span>
</pre><pre class="eval">   <span class="comment">Firefox</span>
</pre><pre class="eval">   <span class="comment">Konqueror</span>
</pre><pre class="eval">   <span class="comment">Netscape</span>
</pre><pre class="eval">   <span class="comment">Opera</span>
</pre><pre class="eval">   <span class="comment">Firefox</span>
</pre><pre class="eval">   <span class="comment">Konqueror</span>
</pre><table class="standard-table" style="width:100%;display:none"> <tbody> <tr> <th class="header">Browser</th> <th class="header" colspan="4">Internet Explorer</th> <th class="header" colspan="4">Netscape</th> <th class="header" colspan="6">Opera</th> <th class="header" colspan="3">Firefox</th> <th class="header" colspan="1">Konqueror</th> </tr> <tr> <th>Version</th>  <th class="header">4</th> <th class="header">5</th> <th class="header">6</th> <th class="header">7</th>  <th class="header">4</th> <th class="header">5</th> <th class="header">6</th> <th class="header">7</th>  <th class="header">3</th> <th class="header">4</th> <th class="header">5</th> <th class="header">6</th> <th class="header">7</th> <th class="header">8</th>  <th class="header">1</th> <th class="header">2</th> <th class="header">3</th>  <th class="header">3.5.x</th> </tr> <tr> <td> </td> <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td>  <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td>  <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td>  <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td>  <td style="background:#5FE716">Ja</td> </tr> </tbody>
</table>
<h3>Siehe auch</h3>
<p><a href="/de/CSS/visibility" title="de/CSS/visibility">visibility</a></p>
Zu dieser Version zurücksetzen