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

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

Valores

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:

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

css#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):

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

css#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á:

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

css#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):

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

css#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:

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

css#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:

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

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

Результат:

Veja também