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 value	`visible`
Aplica-se a	non-replaced block-level elements and non-replaced inline-block elements
Inherited	não
Midia	visual
Computed value	as specified
Animatable	não
Canonical order	the 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

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

Propriedades CSS relacionadas: text-overflow, white-space, overflow-x, overflow-y, clip, display