CSS - Estouro
A overflow propriedade CSS controla o que acontece com o conteúdo que é grande
demais para caber em uma área.
VALORES OVERFLOW:
Ø visible- Padrão. O
estouro não é cortado. O conteúdo renderiza fora da caixa do elemento
Ø hidden- O estouro é cortado
e o restante do conteúdo ficará invisível
Ø scroll- O estouro é cortado
e uma barra de rolagem é adicionada para ver o restante do conteúdo
Ø auto- Semelhante ao scroll, mas adiciona barras
de rolagem somente quando necessário
estouro: visível
visible,
o que significa que não é recortado e é renderizado fora da caixa do elemento:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:
coral;
width: 200px;
height: 65px;
border: 1px solid;
overflow: visible;
}
</style>
</head>
<body>
<h2>Estouro: visível</h2>
<p>Por padrão, o estouro é visível, o que significa
que não é recortado e é renderizado fora da caixa do elemento:</p>
<div>Você pode usar a propriedade overflow quando
quiser ter um melhor controle do layout. A propriedade overflow especifica o
que acontece se o conteúdo transbordar a caixa de um elemento. </div>
</body>
</html>
estouro: oculto
Com o hidden valor, o estouro é recortado e
o restante do conteúdo é ocultado:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:
coral;
width: 200px;
height: 65px;
border: 1px solid
black;
overflow: hidden;
}
</style>
</head>
<body>
<h2>Estouro: oculto</h2>
<p>Com o valor oculto, o estouro é recortado e o
restante do conteúdo é ocultado:</p>
<p>Tente remover a propriedade overflow para entender
como ela funciona.</p>
<div>Você pode usar a propriedade overflow quando
quiser ter um melhor controle do layout. A propriedade overflow especifica o
que acontece se o conteúdo transbordar a caixa de um elemento. </div>
</body>
</html>
estouro: rolagem
scroll,
o estouro é cortado e uma barra de rolagem é adicionada para rolar dentro da
caixa.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:
coral;
width: 200px;
height: 100px;
border: 1px solid
black;
overflow: scroll;
}
</style>
</head>
<body>
<h2>Estouro: rolar</h2>
<p>Definindo o valor de estouro para rolar, o estouro
é cortado e uma barra de rolagem é adicionada para rolar dentro da caixa.
Observe que isso adicionará uma barra de rolagem horizontal e verticalmente
(mesmo que você não precise dela):</p>
<div>Você pode usar a propriedade overflow quando
quiser ter um melhor controle do layout. A propriedade overflow especifica o
que acontece se o conteúdo transbordar a caixa de um elemento.</div>
</body>
</html>
estouro: automático
O autovalor é semelhante a scroll, mas adiciona barras de rolagem somente quando
necessário:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:
coral;
width: 200px;
height: 65px;
border: 1px solid
black;
overflow: auto;
}
</style>
</head>
<body>
<h2>Estouro: automático</h2>
<p>O valor auto é semelhante ao scroll, só que
adiciona barras de rolagem quando necessário:</p>
<div>Você pode usar a propriedade overflow quando
quiser ter um melhor controle do layout. A propriedade overflow especifica o
que acontece se o conteúdo transbordar a caixa de um elemento. </div>
</body>
</html>
estouro-x e estouro-y
As
propriedades overflow-xe overflow-yespecificam se o estouro do conteúdo deve ser alterado apenas
horizontalmente ou verticalmente (ou ambos):
overflow-xespecifica o que fazer com
as bordas esquerda/direita do conteúdo.
overflow-yespecifica o que fazer com as bordas superior/inferior do
conteúdo.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid black;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<h2>Estouro-x e estouro-y</h2>
<p>Você também pode alterar o estouro do conteúdo horizontal
ou verticalmente.</p>
<p>overflow-x especifica o que fazer com as bordas
esquerda/direita do conteúdo.</p>
<p>overflow-y especifica o que fazer com as bordas
superior/inferior do conteúdo.</p>
<div>Você pode usar a propriedade content.the overflow
quando quiser ter um melhor controle do layout. A propriedade overflow
especifica o que acontece se o conteúdo transbordar a caixa de um
elemento.</div>
</body>
</html>