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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
---
title: overflow
slug: Web/CSS/overflow
translation_of: Web/CSS/overflow
---
<div>{{ CSSRef() }}</div>
<h2 id="Summary" name="Summary">Resumo</h2>
<p>A propriedade <code>overflow</code> especifica quando o conteúdo de um elemento de nível de bloco deve ser cortado, exibido com barras de rolagem ou se transborda do elemento.</p>
<p>O uso da propriedade <code>overflow</code> com valor diferente de <code>visible</code> (seu valor padrão), criará um novo <a href="/en-US/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">contexto de formatação de bloco</a>. Isto é tecnicamente necessário para evitar que um conteúdo flutuante que entre em contato com o objeto dentro da área de rolamento e quebre as linhas do conteúdo para ajustar a disposição do texto. A quebra das linhas ocorre sempre que a barra de rolagem é utilizada, tornando a experiência de rolagem lenta.</p>
<div class="note">
<p><strong>Nota</strong>: Ao definir a propredade <code>scrollTop</code> para o <code>elemento</code> HTML relevante, mesmo que o valor de <code>overflow </code>seja <code>hidden,</code> o conteúdo ainda pode precisar rolar.</p>
</div>
<p>{{cssinfo}}</p>
<h2 id="Syntax" name="Syntax">Sintaxe</h2>
<pre class="syntaxbox">overflow: visible | hidden | scroll | {{ cssxref("auto") }} | {{ cssxref("inherit") }}</pre>
<h3 id="Values" name="Values">Valores</h3>
<dl>
<dt><code>visible</code></dt>
<dd>Valor padrão. O conteúdo não é cortado e pode ser renderizado para fora da caixa de conteúdo.</dd>
<dt><code>hidden</code></dt>
<dd>O conteúdo é cortado e nenhuma barra de rolagem é exibida.</dd>
<dt><code>scroll</code></dt>
<dd>O conteúdo é acessível através de barras de rolagem que são exibidas mesmo que o conteúdo não precise. Isso evita o problema de barras de rolagem aparecendo e desaparecendo quando o conteúdo é dinâmico. Impressoras podem imprimir o conteúdo vazado.</dd>
<dt><code>auto</code></dt>
<dd>Depende do navegador utilizado. Navegadores desktop como o Firefox geralmente exibem barras de rolagem apenas quando necessário.</dd>
</dl>
<h4 id="Mozilla_Extensions" name="Mozilla_Extensions">Extensões da Mozilla</h4>
<dl>
<dt><code>-moz-scrollbars-none </code>{{ obsolete_inline() }}</dt>
<dd>Use <code>overflow:hidden</code> no lugar.</dd>
<dt><code>-moz-scrollbars-horizontal </code>{{ Deprecated_inline() }}</dt>
<dd>O uso de {{ Cssxref("overflow-x") }} e {{ Cssxref("overflow-y") }} é preferido.</dd>
<dt><code>-moz-scrollbars-vertical </code>{{ Deprecated_inline() }}</dt>
<dd>O uso de {{ Cssxref("overflow-x") }} e {{ Cssxref("overflow-y") }} é preferido.</dd>
<dt>-moz-hidden-unscrollable {{ non-standard_inline() }}</dt>
<dd>É mantido principalmente para uso interno e por temas. Desabilita o rolamento de elementos raiz de XML e <code><html></code>, <code> <body></code> mediante o uso das setas do teclado ou scroll do mouse.</dd>
</dl>
<h2 id="Examples" name="Examples">Exemplos</h2>
<pre class="brush: css">p {
width: 12em;
border: dotted;
overflow: visible; /* Exibe o conteúdo de forma vazada, fora da caixa de conteúdo */
}
</pre>
<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>
<pre>p { overflow: hidden; /* Esconde o conteúdo excedente */ }
</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>
<pre>p { overflow: scroll; /* Sempre exibe barras de rolagem */ }
</pre>
<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>
<pre>p { overflow: auto; /* Exibe barras de rolagem apenas se necessário */ }
</pre>
<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>
<h2 id="Specifications" name="Specifications">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Box', '#overflow1', 'overflow') }}</td>
<td>{{ Spec2('CSS3 Box') }}</td>
<td>Sem alteração.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'visufx.html#overflow', 'overflow') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade entre navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>1.0</td>
<td>{{ CompatGeckoDesktop("1") }}</td>
<td>4.0</td>
<td>7.0</td>
<td>1.0 (85)</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("1") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<h3 id="Firefox_(Gecko)_Notes" name="Firefox_(Gecko)_Notes">Notas sobre o Firefox (Gecko)</h3>
<p>Até o Firefox 3.6 (Gecko 1.9.2), a propriedade<code> overflow </code>é incorretamente aplicada para elementos de grupo de tabela (<code><thead></code> , <code><tbody></code> , <code><tfoot></code>). Este comportamento foi corrigido em versões posteriores.</p>
<h3 id="Internet_Explorer_Notes" name="Internet_Explorer_Notes">Notas sobre o Internet Explorer</h3>
<p>Internet Explorer 4 até 6 torna mais largos elementos com <code>overflow:visible </code>(valor padrão) para acomodar todo o conteúdo.<code> height/width </code>comportam-se como<code> min-height/min-width</code>.</p>
<h2 id="See_also" name="See_also">Veja também</h2>
<ul>
<li>Propriedades CSS relacionadas: {{ cssxref("text-overflow") }}, {{ cssxref("white-space") }}, {{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("clip") }}, {{ Cssxref("display") }}</li>
</ul>
|
