CSS Overflow: ocultando parte de um conteúdo

Nesta documentação de CSS falaremos sobre a propriedade Overflow do CSS, utilizada quando queremos ocultar parte do conteúdo de um elemento. Através do uso de overflow podemos criar também barras de rolagem para conteúdos muito grandes.

Overflow

O overflow é uma propriedade do CSS utilizada para tratar conteúdos que ultrapassam os limites de um elemento.

O objetivo do overflow é fazer com que conteúdos muito grandes possam caber dentro de uma página através do uso de barras de rolagem.

Veremos mais a frente um exemplo prático de overflow.

Overflow: na prática

A seguir temos um exemplo de uso da propriedade overflow:

See the Pen Untitled by Eduardo Soares (@eduscxbox) on CodePen.

Overflow: valores

A propriedade overflow possui quatro valores possíveis que veremos a seguir.

visible

Esse é o valor padrão da propriedade overflow, e mostra todo conteúdo que for colocado dentro do elemento, ainda que ultrapasse o tamanho definido.

See the Pen Visible by Eduardo Soares (@eduscxbox) on CodePen.

hidden

O valor hidden é utilizado quando queremos esconder a parte de um elemento para que ele não passe do tamanho determinado. Geralmente é utilizado junto das propriedades width e height.

See the Pen Hidden by Eduardo Soares (@eduscxbox) on CodePen.

scroll

O valor scroll tem o mesmo comportamento do hidden, ocultando o conteúdo no limite do tamanho definido, porém, ele adiciona também uma barra de rolagem, permitindo acesso ao restante do conteúdo.

É importante saber que o valor scroll adicionará barras de rolagem ainda que elas não sejam necessárias. Esse comportamento pode ser visto no exemplo abaixo, que mostra uma barra vertical necessária e uma horizontal desnecessária.

See the Pen Scroll by Eduardo Soares (@eduscxbox) on CodePen.

auto

O valor auto, por sua vez, tem o mesmo comportamento do scroll: a única mudança é que o scroll só será adicionado caso seja necessário.

Veja que agora apenas a barra vertical é exibida:

See the Pen Auto by Eduardo Soares (@eduscxbox) on CodePen.

Overflow: formas de uso

A propriedade overflow pode ser utilizada de três formas diferentes que veremos a seguir.

overflow

Essa é a forma padrão, utilizada para aplicar o efeito tanto na horizontal, quanto na vertical:

overflow: auto;

overflow-x

Essa forma é utilizada para aplicar o overflow apenas na horizontal. Ao fazer isso, a parte vertical assumirá por padrão o valor auto.

See the Pen overflow-x by Eduardo Soares (@eduscxbox) on CodePen.

overflow-y

Essa forma é utilizada para aplicar o overflow apenas na vertical. Ao fazer isso, a parte horizontal assumirá por padrão o valor auto.

See the Pen Overflow-y by Eduardo Soares (@eduscxbox) on CodePen.

Overflow-x e Overflow-y simplificados

Também é possível replicar o comportamento de overflow-x e overflow-y de forma simplificada utilizando o overflow. Para isso, basta informar 2 valores, o primeiro valor equivale ao overflow-x, já o segundo, equivale ao overflow-y. Veja o exemplo:

See the Pen Overflow X e Y Simplificado by Eduardo Soares (@eduscxbox) on CodePen.

Exemplo prático de uso do overflow

Veja a seguir um exemplo prático de uso de overflow em uma página:

See the Pen Exemplo Prático - Bioparque by Eduardo Soares (@eduscxbox) on CodePen.

Artigos relacionados