pular para o conteúdo [1]

Artigos sobre Front-End e Programação web

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

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.

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.

Veja mais exemplos da propriedade overflow

Categorias: CSS |

2 Comentários

  1. Muito bom … valew a dica tava precisando aqui 😀

  2. Cara, eu não sabia que era possível fazer isso com CSS, excelente dica, muito obrigado e parabéns pelo blog!

Topo