2.5 KiB
title | localeTitle |
---|---|
Overflow | Transbordar |
Transbordar
A propriedade de overflow
especifica o que acontece se o conteúdo estourar a caixa de um elemento (essa propriedade só funciona para elementos de bloco com uma altura especificada).
Esta propriedade especifica se é necessário recortar o conteúdo ou adicionar barras de rolagem quando o conteúdo de um elemento é grande demais para caber em uma área especificada.
Por exemplo, um determinado elemento de nível de bloco ( <div>
) definido como 300px de largura, que contém uma imagem com largura de 400px. A imagem ficará fora da div e ficará visível por padrão. No entanto, se o valor de estouro estiver definido como oculto, a imagem será cortada em 300px.
Valores
visible
: este é o valor padrão da propriedade. O conteúdo não é recortado quando é maior que a caixa.hidden
: O conteúdo transbordante ficará oculto.scroll
: Semelhante ao oculto, mas os usuários poderão rolar pelo conteúdo oculto.auto
: se o conteúdo continuar fora de sua caixa, esse conteúdo ficará oculto, enquanto uma barra de rolagem deverá estar visível para os usuários lerem o restante do conteúdo.initial
: usa o valor padrão que é visível.inherit
: define o estouro para o valor de seu elemento pai.
Exemplos
Visível:
.box-element { overflow: visible; }
Escondido:
.box-element { overflow: hidden; }
Rolagem:
.box-element { overflow: scroll; }
Auto:
.box-element { overflow: auto; }
estouro-x e estouro-y
overflow-x
: permite ao usuário percorrer o conteúdo que ultrapassa a altura do elemento box.overflow-y
: permite ao usuário rolar pelo conteúdo que ultrapassa a largura da caixa.
.box-element {
overflow-x: scroll;
overflow-y: auto;
}
Se o conteúdo ultrapassar o eixo Y, esse conteúdo ficará oculto, enquanto uma barra de rolagem deverá estar visível para os usuários lerem o restante do conteúdo.
Mais Informações:
CSS-Tricks: estouro