Estouro - CSS-Tricks

A overflowpropriedade controla o que acontece ao conteúdo que ultrapassa seus limites: imagine um divem que você definiu explicitamente como 200 px de largura, mas contém uma imagem que tem 300 px de largura. Essa imagem ficará fora do div e será o visiblepadrão. Ao passo que se você definir o overflowvalor como hidden, a imagem será cortada em 200px.

div ( overflow: visible | hidden | scroll | auto | inherit )

Valores

• visible: o conteúdo não é cortado quando sai de sua caixa. Este é o valor padrão da propriedade
• hidden: o conteúdo transbordando ficará oculto.
• scroll: semelhante a oculto, exceto que os usuários serão capazes de rolar pelo conteúdo oculto
• auto: se o conteúdo continuar fora de sua caixa, esse conteúdo ficará oculto enquanto uma barra de rolagem deve estar visível para que os usuários leiam o restante do conteúdo.
• initial: usa o valor padrão que é visible
• inherit: define o estouro para o valor de seu elemento pai.

Lembre-se de que o texto será quebrado naturalmente no final de um elemento (a menos que o espaço em branco seja alterado), portanto, o texto raramente será a causa do estouro. A menos que uma altura seja definida, o texto apenas empurrará um elemento mais alto também. O transbordamento entra em ação mais comumente quando larguras e alturas explícitas são definidas e seria indesejável que qualquer conteúdo vazasse ou quando a rolagem fosse explicitamente evitada.

Visível

Se você não definir a propriedade overflow, o padrão é visível. Portanto, em geral, não há razão para definir explicitamente essa propriedade como visível, a menos que você a substitua para que não seja definida em outro lugar.

O importante a lembrar aqui é que, embora o conteúdo seja visível fora da caixa, esse conteúdo não afeta o fluxo da página. Por exemplo:

Geralmente, você não deve definir alturas estáticas em caixas com texto da web nelas, por isso não deve aparecer.

Escondido

O oposto do padrão visível está oculto . Isso literalmente oculta qualquer conteúdo que vá além da caixa.

Isso é particularmente útil em uso com conteúdo dinâmico e a possibilidade de um estouro causando sérios problemas de layout. No entanto, tenha em mente que o conteúdo que está oculto dessa forma é totalmente inacessível (exceto para visualizar a fonte). Assim, por exemplo, um usuário tem seu tamanho de fonte padrão definido maior do que o esperado, você pode empurrar o texto para fora de uma caixa e ocultá-lo completamente de sua visualização.

Rolagem

Definir o valor de estouro de uma caixa para rolar ocultará o conteúdo da renderização fora da caixa, mas oferecerá barras de rolagem para rolar o interior da caixa para visualizar o conteúdo.

Digno de nota com este valor é que você obtém AMBAS as barras de rolagem horizontais e verticais, não importa o que aconteça, mesmo se o conteúdo exigir apenas uma ou outra.

A rolagem momentum do iOS pode ser habilitada para este valor com -webkit-overflow-scrolling.

Nota: No OS X Lion, quando as barras de rolagem são definidas para mostrar apenas quando em uso, scrollse comporta mais como auto, em que apenas as barras de rolagem necessárias aparecerão.

Auto

O estouro automático é muito semelhante ao valor de rolagem, mas resolve o problema de obter barras de rolagem quando você não precisa delas. As barras de rolagem só aparecerão se houver conteúdo que realmente saia do elemento.

overflow-x e overflow-y

Também é possível manipular o estouro de conteúdo horizontal ou verticalmente com as propriedades overflow-xe overflow-y. Por exemplo, na demonstração abaixo, o estouro horizontal pode ser percorrido enquanto o texto que se estende além da altura da caixa está oculto:

.box ( overflow-y: hidden; overflow-x: scroll; )

Float Clearing

Um dos usos mais populares de configuração de estouro, estranhamente, é compensação de flutuação. Definir estouro não limpa o flutuador no elemento, ele se auto-limpa. Isso significa que o elemento com estouro (qualquer valor, exceto visible) se estenderá tanto quanto precisar para abranger os elementos filhos internos que estão flutuando (em vez de colapsar), assumindo que a altura não seja declarada. Como isso:

Uma técnica de compensação de float melhor é o clearfix, pois não requer que você altere a propriedade overflow de uma forma desnecessária.

Gerando contexto de formatação de bloco

É interessante notar que overflowtambém criará um novo contexto de formatação de bloco que é útil se quisermos alinhar um elemento de bloco próximo a um flutuante. No exemplo abaixo, mostramos como vários parágrafos irão interagir com uma imagem flutuante por padrão e, em seguida, usamos overflow: hiddenpara alinhar o texto em sua própria caixa:

Isso vem de um ótimo post de Nicole Sullivan que inspirou o objeto de mídia.

As barras de rolagem podem ser estilizadas com CSS?

Você costumava estilizar barras de rolagem no IE (v5.5?), Mas não mais. Você pode estilizá-los agora novamente nos navegadores WebKit. Se você precisar de barras de rolagem personalizadas em vários navegadores, consulte o JavaScript.

Se um elemento precisa ter barras de rolagem anexadas para honrar o valor de estouro, o Firefox os coloca fora do elemento, mantendo a largura / altura visível conforme declarado. O IE coloca as barras de rolagem dentro, mantendo a largura / altura geral conforme declarado.

Demo

Demonstrações para este artigo retiradas desta página de amostra.

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

Área de Trabalho

cromada	Raposa de fogo	IE	Beira	Safári
91	87	11	88	TP

Celular / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	14,0-14,4

Relacionado

• A propriedade float

Mais Informações

• Compreendendo o Humble Clearfix
• Overflow: um benefício secreto
• Excesso no MDN
• Overflow em W3C
• Encontrando / corrigindo transbordamento corporal não intencional