Propriedade de Overflow CSS | Explicado

Enquanto desenvolvemos sites, geralmente encontramos situações em que o conteúdo presente em certos elementos HTML transbordam. Você pode escolher o que fazer com o conteúdo transbordante usando a propriedade CSS Overflow. Esta postagem foi projetada para esclarecer seus leitores sobre os detalhes da propriedade Overflow no CSS.

Este tutorial cobre.

1. Propriedade de transbordamento
2. Valor visível
3. Valor oculto
4. Valor automático
5. Overflow-X e Overflow-y

Vamos começar.

Propriedade de transbordamento

A propriedade Overflow controla o comportamento do conteúdo que transborda a área especificada de um elemento, além disso, a propriedade Overflow foi projetada para elementos em nível de bloco apenas.

Como outras propriedades do CSS, a propriedade Overflow também exibe certos valores que são explicados em profundidade abaixo.

Valor visível

Este é um valor padrão da propriedade Overflow. Suponha que se seu conteúdo for colocado dentro de uma caixa e estiver transbordando, esse valor exibirá o conteúdo que excede a área da caixa. Além disso, o conteúdo que está sendo exibido fora do limite da caixa não perturbará o alinhamento de outros elementos circundantes.

Aqui está um exemplo desse valor.

Html

Enquanto desenvolvemos sites, geralmente encontramos situações em que o conteúdo presente em certos elementos HTML transbordam. Você pode escolher o que fazer com o conteúdo transbordante usando a propriedade CSS Overflow.

CSS

Saída

Passando para o próximo valor.

Valor oculto

O valor oculto da propriedade Overflow oculta todo o conteúdo que está excedendo a área da caixa. Essa propriedade deve ser tratada com cuidado, porque o conteúdo de que essa propriedade oculta é completamente invisível para o usuário, no entanto, é mais adequado para exibir conteúdo dinâmico por natureza. Abaixo está um exemplo do valor oculto.

Saída

O conteúdo que excede a área da caixa foi oculto.

Valor de rolagem

Este valor oculta o conteúdo que excede a área da caixa dentro da caixa e fornece barras de rolagem vertical e horizontal para visualizar o conteúdo. Aqui está um exemplo.

Saída

As barras de rolagem foram adicionadas.

Valor automático

Esse valor tem uma função semelhante ao valor de rolagem, no entanto, o que o torna diferente do valor de rolagem é que ele adiciona barras de rolagem à caixa somente quando o conteúdo está excedendo a área da caixa. Além disso, ele adicionará apenas o tipo de barra de rolagem que é necessária. Aqui está um exemplo.

Saída

O valor automático da propriedade Overflow aplicada com sucesso.

Overflow-X e Overflow-y

Essas são outras duas propriedades que controlam o que acontece com o conteúdo transbordante horizontal ou verticalmente. A propriedade Overflow-X controla o comportamento horizontal do conteúdo, enquanto a propriedade Overflow-Y determina o comportamento vertical do conteúdo. Aqui está um exemplo.

No exemplo acima, a propriedade Overflow-X recebeu o valor de rolagem e o excesso de rolagem foi atribuído o valor oculto como resultado, o conteúdo que excede a área da caixa será oculto e a caixa terá uma barra de rolagem vertical.

Saída

Conclusão

A propriedade Overflow é usada para controlar o comportamento do conteúdo que transborda a área especificada de um elemento, além disso, a propriedade Overflow foi projetada para elementos em nível de bloco apenas. A propriedade Overflow renderiza quatro valores que são; Visível, role, escondido e auto. Existem mais duas propriedades que controlam o que acontece com o conteúdo transbordante, horizontal ou verticalmente; Overflow-x e transbordamento-y. Este post discute a propriedade Overflow em profundidade com a ajuda de exemplos adequados.