Propriedade Overflow no CSS

Há bastante tempo não escrevo artigos sobre CSS aqui no blog. Hoje pela manhã resolvi que iria escrever algo falando sobre CSS. Escolhi a propriedade Overflow.

Com a propriedade Overflow (sobrecarga) do CSS, podemos escolher o que deverá acontecer se o conteúdo ultrapassar o tamanho de uma DIV. Podemos adicionar barra de rolagem, ocultar o conteúdo ultrapassado, etc. Essa propriedade decide o que fazer se o conteúdo exceder o tamanho de um elemento, no nosso exemplo a DIV.

Esta propriedade do CSS deve ser usada no lugar da tag iframe do HTML.

Tipos de Overflow mais utilizados

• hidden – Corta o conteúdo que ultrapassa o tamanho da DIV.
• scroll – Mostra as barrades de rolagens, vertical e horizontal, mesmo que não seja necessário.
• auto – Acho essa a melhor opção porque só cria barra de rolagem quando necessário.

Além dessas três opções temos a inherit que herda os valores, e a opção visible que é a padrão.

Vamos aos exemplos na prática.

Código (X)HTML

<div>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum tristique enim non pharetra. Praesent eu libero odio, eu molestie nunc. Proin et orci a lectus tincidunt blandit venenatis quis arcu. Aenean odio massa, sagittis quis elementum et, cursus sit amet neque. Nulla facilisi. Vestibulum malesuada velit iaculis ligula luctus bibendum. </p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum tristique enim non pharetra. Praesent eu libero odio, eu molestie nunc. Proin et orci a lectus tincidunt blandit venenatis quis arcu. Aenean odio massa, sagittis quis elementum et, cursus sit amet neque. Nulla facilisi. Vestibulum malesuada velit iaculis ligula luctus bibendum. </p>
</div>

Código CSS

div{
	border:solid 1px #000000;
	width:200px;
	height:300px;
	overflow:auto;
}

Resultado final utilizando overflow:auto

Veja mais exemplos da propriedade overflow