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 | Block-containers, flex containers, and grid containers |
Inherited | não |
Computed value | as each of the properties of the shorthand:
|
Animation type | discrete |
Sintaxe
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
eoverflow-y
é preferido. -moz-scrollbars-vertical
Deprecated-
O uso de
overflow-x
eoverflow-y
é 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
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
Specification |
---|
CSS Overflow Module Level 3 # propdef-overflow |
Compatibilidade com navegadores
BCD tables only load in the browser
Veja também
- Propriedades CSS relacionadas:
text-overflow
,white-space
,overflow-x
,overflow-y
,clip
,display