Propriedade Overflow do CSS

Abordarei nesse tutorial como e quando usar a propriedade overflow do CSS. Esta é uma propriedade simples mas que pode ser bastante útil em algumas situações.

A propriedade overflow é utilizada quando há um transbordamento de conteúdo dentro de uma div. O que eu quero dizer com isso? Quando por exemplo temos um texto que ocupa mais espaço do que a div suporta é a propriedade overflow que vai dizer o que fazer com esse conteúdo. Vamos ver isso na prática.

Primeiro crie um novo arquivo html simples para usar como exemplo:

Agora criaremos um novo arquivo css. Dei a ele o nome css.css e salvei no mesmo diretório do arquivo html:

Nesse arquivo vamos definir as propriedades da nossa div. Colocaremos uma largura(width), uma altura(heigth) e uma borda para podermos vizualizar bem o espaço ocupado pela div:

Agora voltamos ao html e colocaremos um texto qualquer dentro da div para que ele ultrapasse o tamanho da div. Também adicionaremos no cabeçalho um link para o arquivo css que criamos:

Vejamos no browser como vai ficar. Observe que o tamanho da div não é suficiente para comportar todo o seu conteúdo, fazendo com ele ultrapasse os limites da div:

Podemos resolver esse problema com a propriedade overflow usando um dos três valores possíveis. O primeiro deles é o hidden. Com ele o conteúdo que sobrar será escondido atrás da div. Para tanto, acrescentaremos a propriedade overflow com valor hidden no nosso CSS:

Veja o resultado:

O segundo valor que podemos usar é o "scroll". O scroll irá simular um iframe colocando uma barra de rolagem vertical e uma horizontal para que possamos ver o conteúdo escondido, vamos alterar o nosso CSS e ver como fica:

No browser:

Usando scroll você verá que é possível subir e descer dentro da div para vizualizar todo o seu conteúdo, mas ainda temos algo que em algumas ocasiões pode ser desagradável. Estou falando dessa barra de rolagem inferior que aparece mesmo quando ela não é necessária. Para tirá-la daí e fazer com que apareça somento quando for preciso usaremos o terceiro valor, que é o "auto":

Veja o resultado:

Como pode ver, a barra inferior sumiu e só aparecerá novamente quando for realmente necessário.

Espero ter conseguido passar de forma clara como funciona essa propriedade. Durante essa semana estarei publicando mais sobre CSS, espero que aproveitem. Qualquer dúvida ou sugestões, deixem comentários.

Fernando Oliveira