A propriedade overflow

A propriedade overflow indica ao navegador, como lidar com o conteúdo (texto, imagens, outros blocos) que transborda dos limites do bloco (para além de sua largura ou altura). O navegador pode ocultar a parte transbordante, adicionar barras de rolagem ou não fazer nada (deixar como está - transbordando dos limites).

Sintaxe

seletor {
	overflow: hidden | scroll | auto | visible;
}

Valores

Valor	Descrição
`hidden`	Oculta o conteúdo que transbordou dos limites do bloco.
`scroll`	Adiciona barras de rolagem, e sempre, mesmo se nada estiver transbordando (neste caso, elas ficarão inativas).
`auto`	Adiciona barras de rolagem quando necessário: se o conteúdo não caber - elas aparecerão, se tudo couber - elas não estarão presentes.
`visible`	Não oculta o conteúdo que transbordou dos limites do bloco.

Valor padrão: visible.

Exemplo . Valor visible

Neste exemplo, uma palavra muito longa não caberá no contêiner e transbordará beyond de seus limites. Nenhum corte ocorre:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: visible;
	border: 1px solid red;
	width: 200px;
}

Exemplo . Valor visible

Agora, não apenas a largura está limitada, mas também a altura (o texto transbordará do bloco também em altura):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	height: 40px;
	overflow: visible;
	border: 1px solid red;
	margin-bottom: 20px;
}

Exemplo . Valor hidden

Agora, tudo que transbordou dos limites do contêiner será simplesmente cortado (também em altura). Preste atenção no fato de que o corte em altura ocorre apenas quando ela é definida explicitamente. Caso contrário, o texto expande o contêiner em altura - e nenhum corte ocorrerá:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: hidden;
	width: 200px;
	height: 40px;
	border: 1px solid red;
}

Exemplo . Valor scroll

Com o valor scroll, as barras de rolagem estarão sempre presentes, mesmo se nada estiver transbordando (neste caso, elas ficarão inativas). Agora o texto não transborda nem em largura, nem em altura, mas as barras de rolagem ainda estão lá (inativas):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: scroll;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Exemplo . Valor auto

Com o valor auto, as barras de rolagem são adicionadas apenas se o conteúdo transbordar do contêiner. Agora elas não estão presentes, pois tudo cabe:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: auto;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Exemplo . Valor auto

E agora, vamos limitar a largura - aparecerá uma barra de rolagem horizontal:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: auto;
	height: 100px;
	border: 1px solid red;
}

Veja também

a propriedade word-break,
que quebra as letras de uma palavra longa em uma nova linha
a propriedade overflow-wrap,
que quebra as letras de uma palavra longa em uma nova linha
a propriedade overflow-x,
que corta as partes que transbordam horizontalmente
a propriedade overflow-y,
que corta as partes que transbordam verticalmente