diff options
Diffstat (limited to 'files/pt-br/web/css/overflow/index.html')
| -rw-r--r-- | files/pt-br/web/css/overflow/index.html | 166 |
1 files changed, 166 insertions, 0 deletions
diff --git a/files/pt-br/web/css/overflow/index.html b/files/pt-br/web/css/overflow/index.html new file mode 100644 index 0000000000..1bcf5b2865 --- /dev/null +++ b/files/pt-br/web/css/overflow/index.html @@ -0,0 +1,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> |