overflow

Resumo

A propriedade overflow 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.

O uso da propriedade overflow com valor diferente de visible (seu valor padrão), criará um novo contexto de formatação de bloco. 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.

Nota: Ao definir a propredade scrollTop para o elemento HTML relevante, mesmo que o valor de overflow seja hidden, o conteúdo ainda pode precisar rolar.

Initial valuevisible
Aplica-se anon-replaced block-level elements and non-replaced inline-block elements
Inheritednão
Midiavisual
Computed valueas specified
Animatablenão
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sintaxe

overflow:  visible | hidden | scroll | auto | inherit

Valores

visible
Valor padrão. O conteúdo não é cortado e pode ser renderizado para fora da caixa de conteúdo.
hidden
O conteúdo é cortado e nenhuma barra de rolagem é exibida.
scroll
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.
auto
Depende do navegador utilizado. Navegadores desktop como o Firefox geralmente exibem barras de rolagem apenas quando necessário.

Extensões da Mozilla

-moz-scrollbars-none
Use overflow:hidden no lugar.
-moz-scrollbars-horizontal
O uso de overflow-x e overflow-y é preferido.
-moz-scrollbars-vertical
O uso de overflow-x e overflow-y é preferido.
-moz-hidden-unscrollable
É mantido principalmente para uso interno e por temas. Desabilita o rolamento de elementos raiz de XML e <html>, <body> mediante o uso das setas do teclado ou scroll do mouse.

Exemplos

p {  
     width: 12em;
     border: dotted;
     overflow: visible;   /* Exibe o conteúdo de forma vazada, fora da caixa de conteúdo */ 
}

visible (default)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: hidden; /* Esconde o conteúdo excedente */ }

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

p { overflow: scroll; /* Sempre exibe barras de rolagem */ }

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

p { overflow: auto; /* Exibe barras de rolagem apenas se necessário */ }

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

Especificações

Especificação Status Comment
CSS Basic Box Model
The definition of 'overflow' in that specification.
Working Draft Sem alteração.
CSS Level 2 (Revision 1)
The definition of 'overflow' in that specification.
Recommendation  

Compatibilidade entre navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 1.0 1.0 (1.7 or earlier) 4.0 7.0 1.0 (85)
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suporte básico ? 1.0 (1) ? ? ?

Notas sobre o Firefox (Gecko)

Até o Firefox 3.6 (Gecko 1.9.2), a propriedade overflow é incorretamente aplicada para elementos de grupo de tabela (<thead> , <tbody> , <tfoot>). Este comportamento foi corrigido em versões posteriores.

Notas sobre o Internet Explorer

Internet Explorer 4 até 6 torna mais largos elementos com overflow:visible (valor padrão) para acomodar todo o conteúdo. height/width comportam-se como min-height/min-width.

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: haskellcamargo, teoli, KikenCris, Sheppy, tito97, Francis
 Última atualização por: haskellcamargo,