Hello, there! Quando estamos programando em CSS é comum usarmos o inglês para definir as propriedades e valores, e entender o que essas palavras significam facilita demais para fazer todos os ajustes exatamente da maneira como queremos.
Uma das propriedades mais úteis e, frequentemente, ignoradas, é a propriedade overflow. Ela serve para controlar o que acontece quando o conteúdo de um elemento ultrapassa o tamanho da caixa onde ele está.
E, como os valores dessa propriedade também são em inglês, entender o que eles significam vai ajudar demais a escrever o seu código com mais segurança. Let's take a look?
A palavra "overflow" significa "transbordar" em inglês. No CSS, essa propriedade é usada quando o conteúdo "transborda" (ou ultrapassa) os limites do seu container, ou seja, quando não cabe tudo dentro da caixa.
Imagine, por exemplo, que você escreveu um texto grande e que ele não vai caber dentro de uma caixa pequena: o que deve acontecer então, quando o texto "transbordar" os limites dessa caixa?
Para dizer ao navegador o que ele deve fazer nesses casos, usamos três valores principais: visible, hidden e scroll. Vamos entender o que cada um significa?
A palavra "visible" significa "visível" em inglês, e é exatamente isso que esse valor faz: ele permite que o conteúdo que ultrapassa o limite do container continue aparecendo normalmente, mesmo que fique "transbordando" para fora.
É como se você dissesse: "Mesmo que não caiba, deixe o conteúdo visível."
Esse é o comportamento padrão do CSS — ou seja, se você não colocar nenhuma regra de overflow, o conteúdo vai ficar visível por padrão.
Já a palavra "hidden" significa "escondido". Quando usamos "overflow: hidden", estamos dizendo ao navegador para esconder qualquer parte do conteúdo que ultrapasse o tamanho do container.
Ou seja: "Se transbordar, esconda o que sobrar."
Isso é útil, por exemplo, quando você quer que sua interface fique mais limpa e não mostre nada além do que cabe na caixa. Mas, nesse caso, o usuário não terá acesso ao conteúdo que está escondido.
Por último, a palavra "scroll" significa "rolar" ou "rolagem". Quando usamos "overflow: scroll", estamos dizendo ao navegador para adicionar uma barra de rolagem no container, mesmo que o conteúdo ultrapasse só um pouquinho.
É como dizer: "Se não couber, mostre a barra para que o usuário possa rolar e ver o conteúdo escondido."
Esse valor é muito usado quando queremos que todo o conteúdo fique disponível, mas dentro de um espaço limitado, como em caixas de texto com rolagem.
Do you remember a situation where you had to use this property? (Você se lembra de uma situação onde teve que usar essa propriedade?)
Continue aprendendo com a gente! Que tal ler agora nosso artigo "O que significa JANK em desenvolvimento de software?"? See you!
Leia também:
Aproveite e faça nosso teste de nível de inglês. Ou baixe nossa apostila que te ensina como aprender inglês de maneira eficiente!
Quer realmente aprender outras línguas, como inglês e espanhol? Conheça os nossos cursos que reforçam o aprendizado de inglês e espanhol.
