Como Criar Sites | Aprenda grátis como fazer seu site

O estilo overflow do CSS define como o elemento irá se comportar caso o seu conteúdo ultrapasse a sua altura ou largura. O estilo overflow do CSS pode ter os seguintes valores.

Visible

- Esse é o valor padrão, o elemento não faz nada e o conteúdo que ultrapassar o elemento sera escrito fora dele.

Hidden

- Todo conteúdo que ultrapassar o elemento com esse valor no estilo overflow ficará escondido, e o elemento não terá barra de rolagem para visualização do resto do conteúdo.

Scroll

- Com esse valor o elemento sempre vai ter barra de rolagem, não importa se tenha ou não conteúdo passando de seus limites. Se você quer que o elemento tenha barra de rolagem, você normalmente não usa overflow: scroll e sim overflow: auto.

Auto

- O elemento exibirá barra de rolagem somente se o seu conteúdo ultrapassar seus limites.

Overflow x/y

Ainda podemos especificar mais quais limites queremos que o overflow atue, utilizando overflow-x, para o overflow valer somente para a barra e o limite horizontal, e overflow-y, para o overflow valer somente para a barra e o limite vertical.

Exemplos de Overflow

Vamos exemplificar alguns casos de overflow para o melhor entendimento.

Elemento sem Overflow

O código do exemplo acima é:

<div style="border: 1px solid black; width: 100px; height: 50px;">Aqui vamos escrever até ver o funcionamento do overflow</div>

Você pode verificar que o tamanho do elemento <div> não mudou, a sua borda mostra isso, mas o texto ultrapassou o limite vertical do elemento. Esse é o comportamento overflow padrão, que é como se colocasse o estilo overflow: visible.

Elemento com Overflow Hidden

O código do exemplo acima é:

<div style="border: 1px solid black; overflow: hidden; width: 100px; height: 50px;">Aqui vamos escrever até ver o funcionamento do overflow</div>

O tamanho do elemento <div> também não mudou, mas o texto dentro dele não ultrapassou a borda do elemento, e todo o conteúdo do elemento que ultrapassou o limite vertical dele ficou escondido.

Elemento com Overflow Scroll

O código do exemplo acima é:

<div style="border: 1px solid black; overflow: scroll; width: 130px; height: 75px;">Aqui vamos escrever até ver o funcionamento do overflow</div>

O elemento <div> ficou com barras de rolagem vertical e horizontal, mesmo sem a necessidade da barra horizontal.

Elemento com Overflow Auto

O código do exemplo acima é:

<div style="border: 1px solid black; overflow: auto; width: 130px; height: 75px;">Aqui vamos escrever até ver o funcionamento do overflow Aqui vamos escrever até ver o funcionamento do overflow</div>

O elemento <div> ficou somente com barra de rolagem vertical e horizontal como não precisou da barra de rolagem horizontal ele não exibe.