1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
---
title: overflow
slug: Web/CSS/overflow
tags:
- CSS
- CSS Referenz
translation_of: Web/CSS/overflow
---
<p>{{ CSSRef() }}</p>
<h2 id="Übersicht">Übersicht</h2>
<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>
<h2 id="Syntax">Syntax</h2>
<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/docs/Web/CSS/overflow-x" title="de/CSS/overflow-x"><code>overflow-x</code></a> und <a href="/de/docs/Web/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/docs/Web/CSS/overflow-x" title="de/CSS/overflow-x"><code>overflow-x</code></a> und <a href="/de/docs/Web/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 (<html>, <body>) und ist nur für interne Zwecke gedacht (z.B. Themes).</dd>
</dl>
<h2 id="Beispiele">Beispiele</h2>
<pre>p {
width: 12em;
height: 6em;
border: dotted;
overflow: auto; /* Scrollbalken erscheinen nur wenn nötig */
}
</pre>
<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>
<h2 id="Hinweise">Hinweise</h2>
<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><thead></code> , <code><tbody></code> , <code><tfoot></code>). Dieses Verhalten wurde in späteren Versionen korrigiert.</p>
<h2 id="Spezifikation">Spezifikation</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}</td>
<td>{{Spec2('CSS3 Overflow')}}</td>
<td>
<p>Changed syntax to allow one or two keywords instead of only one</p>
</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Box', '#propdef-overflow', 'overflow')}}</td>
<td>{{Spec2('CSS3 Box')}}</td>
<td>No change.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
<p>{{Compat("css.properties.overflow")}}</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>Ähnliche CSS Eigenschaften: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}
</li></ul>
<p>{{ languages( { "en": "en/CSS/overflow" } ) }}</p>
|
