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 (en-US). 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 | Block-containers, flex containers, and grid containers |
Inherited | não |
Computed value | as each of the properties of the shorthand:
|
Animation type | discrete |
Sintaxe
overflow: visible | hidden | scroll |auto
(en-US) |inherit
(en-US)
Valores
visible
-
Valor padrão. O conteúdo não é cortado e pode ser renderizado para fora da caixa de conteúdo.
-
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
Deprecated-
O uso de
overflow-x
(en-US) eoverflow-y
(en-US) é preferido. -moz-scrollbars-vertical
Deprecated-
O uso de
overflow-x
(en-US) eoverflow-y
(en-US) é preferido. -
É 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
css
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 Box Model The definition of 'overflow' in that specification. |
Candidata a Recomendação | Sem alteração. |
CSS Level 2 (Revision 1) The definition of 'overflow' in that specification. |
Recomendação |
Compatibilidade com navegadores
BCD tables only load in the browser
Veja também
- Propriedades CSS relacionadas:
text-overflow
,white-space
,overflow-x
(en-US),overflow-y
(en-US),clip
(en-US),display