Cursos / Informática para Internet / Desenvolvimento Front-end I / Aula

arrow_back Aula 09 - Modelo de caixas, Posicionamento e Alinhamento

Propriedade overflow


A propriedade overflow permite controlar o comportamento do elemento, quando seu conteúdo for maior que a área determinada para o elemento que está inserido.

O comportamento padrão do HTML é mostrar o conteúdo que excede a área. Ou seja, o padrão é o valor "visible" para essa propriedade. No entanto, é possível alterar esse comportamento escolhendo outras opções disponíveis. Veja exemplo abaixo que mostra como configurar a propriedade overflow de uma "div".

div {
  overflow: visible;
}

Caso desejes esconder o conteúdo que excede o tamanho do elemento, altere essa propriedade para o valor "hidden", conforme exemplo:

div {
  overflow: hidden;
}

Outra opção é mostrar uma barra de rolagem ao usuário, para que ele possa acessar o conteúdo que excede a área disponível. Veja no exemplo:

div {
  overflow: scroll;
}

Também é possível configurar o comportamento para ser automático. Ou seja, um scroll é apresentado, apenas se o conteúdo for maior que a área disponível.

div {
  overflow: auto;
}

Caso desejes ter controle do overflow no sentido horizontal, utilize a propriedade "overflow-x". Similarmente, se quiser controlar apenas o overflow no sentido vertical, utilize a propriedade "overflow-y".


Versão 5.3 - Todos os Direitos reservados