Overlowing em HTML5

Uma vez que iniciamos o caminho de fazer mudanças nos tamanhos dos elementos e seus contêineres, sempre chega um momento em que os dois não são mais compatíveis e obtemos o terrível efeito de transbordar ou estouro, que nada mais é do que o efeito de um elemento ser maior do que outro e cair de seu recipiente.
Vamos ver um exemplo clássico de um elemento que é muito pequeno para o seu conteúdo e que gera um estouro, pois tudo fica mais fácil de ver através dos exemplos, primeiro vamos ver um antes de seguirmos para ver as propriedades que nos ajudam a controlar o estouro.

 Exemplo
Existem muitos tipos diferentes de frutas - existem mais de 500 variedades de banana. No momento em que adicionamos os incontáveis ​​tipos de maçãs, laranjas e outras frutas conhecidas, nos deparamos com milhares de opções.

O código anterior gera o seguinte resultado no navegador:

Como podemos ver o texto sobre a passagem da capacidade da caixa do recipiente, para corrigir isso podemos usar a propriedade transbordar, vamos examinar as propriedades antes de proceder para fazer a correção para este problema:

overflow-x / overflow-y: Eles determinam o comportamento de estouro horizontal ou vertical.

Transbordar: É um atalho para usar a propriedade anterior e a ordem em que funciona é estouro, estouro x, estouro y.

As propriedades que podem ser usadas com o elemento transbordar são as seguintes:

carro: Este valor delega ao navegador a responsabilidade de decidir o que fazer, geralmente o que acontece é que uma barra de rolagem é mostrada quando o elemento começa a transbordar contendo-o.

escondido: O conteúdo é mostrado até a parte que não transborda, ocultando o resto do conteúdo, não tem mecanismos para dizer ao usuário o que fazer para ver o resto do conteúdo.

sem conteúdo: O conteúdo transbordado é removido se não puder ser acomodado no contêiner. Este valor não é compatível com nenhum dos navegadores mais populares

nenhuma exibição: O conteúdo fica oculto se não puder ser totalmente exibido. Este valor não é compatível com nenhum dos navegadores mais populares.

rolagem: O navegador gera uma barra de rolagem permitindo que o usuário sempre veja o conteúdo transbordado dentro do contêiner. A barra dependerá do navegador e do sistema para definir a forma como é exibida. A barra de rolagem sempre estará visível, mesmo se o elemento não transbordar.

visível: Este é o valor padrão. O conteúdo é sempre exibido, mesmo se transbordar.

Agora que temos as ferramentas para atacar um estouro, vamos ver na prática como podemos aplicá-lo, nada melhor do que um pequeno código para demonstrá-lo:

 Exemplo
Existem muitos tipos diferentes de frutas - existem mais de 500 variedades de banana. No momento em que adicionamos os incontáveis ​​tipos de maçãs, laranjas e outras frutas conhecidas, nos deparamos com milhares de opções.
Existem muitos tipos diferentes de frutas - existem mais de 500 variedades de banana. No momento em que adicionamos os incontáveis ​​tipos de maçãs, laranjas e outras frutas conhecidas, nos deparamos com milhares de opções.

Usamos dois elementos para demonstrar como o transbordar, no primeiro colocamos o imóvel escondido onde sabemos que somente o conteúdo será mostrado até onde o estouro começa, então o resto é escondido e para o segundo usamos scroll, com o qual uma barra de scroll será mostrada se o elemento estourou ou não, vamos ver o resultado:

Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo