overflow A propriedade gerencia o que acontece quando o conteúdo transborda ou é derramado fora de seu contêiner. Você já encontrou um pedaço de texto ou imagem que é muito grande para a caixa designada e transborda? Bem, é aí que nosso bom amigo overflow entra, instruindo o navegador sobre como lidar com essas incômodas situações de estouro. Isso pode significar mostrar barras de rolagem, cortar o excesso de conteúdo ou expandir a caixa.
Sintaxe
O overflow propriedade é bastante simples de usar. Você o declara em um elemento e ele vem com alguns valores possíveis para controlar o comportamento do conteúdo overflow.
Aqui está um trecho de código simples:
1 |
div { |
2 |
overflow: auto; |
3 |
}
|
Neste exemplo, auto diz ao navegador para fornecer uma barra de rolagem se o conteúdo ultrapassar o contêiner div. É como ter um barco de resgate que pode ser acionado automaticamente quando ocorre uma enchente (transbordamento)!
Por padrão, o overflow propriedade está definida como visibleo que significa que o conteúdo excedente não é cortado e pode ser renderizado fora da caixa.
Esta propriedade se aplica a contêineres de bloco, contêineres flexíveis e contêineres de grade.
O overflow o valor da propriedade não é herdado. Portanto, se quiser que todos os seus divs tenham o mesmo comportamento de overflow, você precisará especificá-lo para cada um.
Finalmente, as animações CSS não podem ser aplicadas ao overflow propriedade. É um defensor da estabilidade e realmente não gosta dos holofotes de animações chamativas!
Exemplo
Este lindo amarelo limão div tem dimensões fixas. Veja o que acontece com o conteúdo quando você altera o overflow valor:
Valores de palavras-chave
Vamos pular para os valores das palavras-chave para overflow. Imagine cada palavra-chave como um conjunto de instruções que você dá ao seu contêiner sobre como lidar com esses elementos transbordantes.
visível
1 |
div { |
2 |
overflow: visible; |
3 |
}
|
Ao definir o overflow propriedade para visible, você está dizendo ao contêiner para deixar o conteúdo transbordar. É como dizer “ei, tudo bem se o café derramar na xícara”.
escondido
1 |
div { |
2 |
overflow: hidden; |
3 |
}
|
Com hidden, qualquer conteúdo que ultrapasse a caixa não será exibido. É como ter uma barreira invisível que não permite que nada transborde.
rolagem
1 |
div { |
2 |
overflow: scroll; |
3 |
}
|
Usando scroll sempre mostrará uma barra de rolagem, haja ou não conteúdo excessivo. É como ter um barco pronto, mesmo quando não há enchente!
auto
1 |
div { |
2 |
overflow: auto; |
3 |
}
|
Auto é o inteligente do grupo. Ele avalia a situação e se houver conteúdo excessivo, fornece uma barra de rolagem.
grampo
O clip valor se comporta de maneira muito semelhante hidden, mas com um pouco de vantagem extra. Imagine um recipiente como uma caixa com paredes rígidas. Quando você define overflow: clip;qualquer conteúdo que tente ultrapassar as paredes será cortado, completamente oculto da visualização, sem nenhuma barra de rolagem à vista.
Aqui está um exemplo:
1 |
div { |
2 |
overflow: clip; |
3 |
}
|
Mas é aqui que as coisas ficam realmente interessantes. O clip o valor é como um professor rigoroso com um ponto fraco. Junto com ele, há outra propriedade, overflow-clip-margin, que permite uma zona tampão ao redor da área de recorte. É como permitir aos alunos um pouco de espaço de manobra, mesmo em um ambiente disciplinado. Você pode especificar uma margem onde o recorte ocorrerá, dando ao seu conteúdo algum espaço para respirar antes de ser cortado.
Confira como podemos usá-lo:
1 |
div { |
2 |
overflow: clip; |
3 |
overflow-clip-margin: 10px; /* Let’s give it some room! */ |
4 |
}
|
Dessa forma, o recorte real acontece a 10px da borda da caixa, e não exatamente na borda.
clip e overflow-clip-margin já que ambos são relativamente novos em CSS.Saber mais
Você sabia que quando o overflow propriedade está definida para qualquer coisa diferente de visible, ele cria um novo contexto de formatação de bloco? Na verdade, isso pode ajudar a resolver problemas de layout misteriosamente complicados, como limpar carros alegóricos!
“Dominar a propriedade CSS Overflow é a chave para criar layouts limpos e controlados.” -Chris Coyier
Tutoriais relevantes
- Como lidar com o estouro de texto (com reticências CSS)
Especificação oficial e suporte ao navegador
