Alinhamento do CSS - Transbordamento

A propriedade CSS overflow controla como o conteúdo que não cabe na área especificada é tratado.

Este texto é muito longo e o contêiner tem apenas 100 pixels de altura. Portanto, uma barra de rolagem foi adicionada para ajudar os leitores a rolar o conteúdo. Este texto é muito longo e o contêiner tem apenas 100 pixels de altura. Portanto, uma barra de rolagem foi adicionada para ajudar os leitores a rolar o conteúdo. Este texto é muito longo e o contêiner tem apenas 100 pixels de altura. Portanto, uma barra de rolagem foi adicionada para ajudar os leitores a rolar o conteúdo. Este texto é muito longo e o contêiner tem apenas 100 pixels de altura. Portanto, uma barra de rolagem foi adicionada para ajudar os leitores a rolar o conteúdo. Este texto é muito longo e o contêiner tem apenas 100 pixels de altura. Portanto, uma barra de rolagem foi adicionada para ajudar os leitores a rolar o conteúdo. Este texto é muito longo e o contêiner tem apenas 100 pixels de altura. Portanto, uma barra de rolagem foi adicionada para ajudar os leitores a rolar o conteúdo. Este texto é muito longo e o contêiner tem apenas 100 pixels de altura. Portanto, uma barra de rolagem foi adicionada para ajudar os leitores a rolar o conteúdo. Este texto é muito longo e o contêiner tem apenas 100 pixels de altura. Portanto, uma barra de rolagem foi adicionada para ajudar os leitores a rolar o conteúdo. Este texto é muito longo e o contêiner tem apenas 100 pixels de altura. Portanto, uma barra de rolagem foi adicionada para ajudar os leitores a rolar o conteúdo. Este texto é muito longo e o contêiner tem apenas 100 pixels de altura. Portanto, uma barra de rolagem foi adicionada para ajudar os leitores a rolar o conteúdo. Este texto é muito longo e o contêiner tem apenas 100 pixels de altura. Portanto, uma barra de rolagem foi adicionada para ajudar os leitores a rolar o conteúdo.

Experimente você mesmo

CSS Overflow

overflow A propriedade especifica se o conteúdo será cortado ou uma barra de rolagem será adicionada quando o conteúdo for maior do que a área especificada.

overflow A propriedade pode ser configurada com os seguintes valores:

  • visible - Padrão. O overflow não é cortado. O conteúdo é renderizado fora da caixa do elemento
  • hidden - O overflow é cortado e o restante do conteúdo ficará invisível
  • scroll - O overflow é cortado e uma barra de rolagem é adicionada para ver o restante do conteúdo
  • auto - Com scroll Semelhante, mas adiciona a barra de rolagem apenas quando necessário

Comentário:overflow A propriedade é aplicável apenas a elementos de bloco com altura especificada.

Comentário:No OS X Lion (no Mac), a barra de rolagem é oculta por padrão e é exibida apenas quando usada (mesmo que configurado "overflow:scroll").

overflow: visible

Padrão: o overflow é visível (visible), isso significa que ele não será cortado, mas será renderizado fora da caixa do elemento:

Quando você deseja melhor controlar o layout, você pode usar a propriedade overflow. A propriedade overflow especifica o que acontece se o conteúdo ultrapassar o limite do elemento.

Exemplo

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

Experimente você mesmo

overflow: hidden

Se você usar hidden O valor, o excesso será cortado e o resto do conteúdo será ocultado:

Quando você deseja melhor controlar o layout, você pode usar a propriedade overflow. A propriedade overflow especifica o que acontece se o conteúdo ultrapassar o limite do elemento.

Exemplo

div {
  overflow: hidden;
}

Experimente você mesmo

overflow: scroll

Se o valor for scrollO conteúdo será cortado e uma barra de rolagem será adicionada para rolar dentro da caixa. Observe que isso adicionará uma barra de rolagem tanto na horizontal quanto na vertical (mesmo que você não precise dela):

Quando você deseja melhor controlar o layout, você pode usar a propriedade overflow. A propriedade overflow especifica o que acontece se o conteúdo ultrapassar o limite do elemento.

Exemplo

div {
  overflow: scroll;
}

Experimente você mesmo

overflow: auto

auto O valor é semelhante a scrollMas ele adiciona a barra de rolagem apenas quando necessário:

Quando você deseja melhor controlar o layout, você pode usar a propriedade overflow. A propriedade overflow especifica o que acontece se o conteúdo ultrapassar o limite do elemento.

Exemplo

div {
  overflow: auto;
}

Experimente você mesmo

overflow-x e overflow-y

overflow-x E overflow-y A propriedade define se a alteração do overflow do conteúdo será horizontal, vertical ou ambos:

  • overflow-x Especifica como lidar com a margem esquerda/direita do conteúdo.
  • overflow-y Especifica como lidar com a margem superior/inferior do conteúdo.
Quando você deseja melhor controlar o layout, você pode usar a propriedade overflow. A propriedade overflow especifica o que acontece se o conteúdo ultrapassar o limite do elemento.

Exemplo

div {
  overflow-x: hidden; /* Ocultar barra de rolagem horizontal */
  overflow-y: scroll; /* Adicionar barra de rolagem vertical */
}

Experimente você mesmo

Todas as propriedades de overflow CSS

Propriedade Descrição
overflow Especificar o que acontece se o conteúdo transbordar o quadro do elemento.
overflow-x Especificar como o conteúdo será tratado quando o conteúdo da área de conteúdo do elemento transbordar para a margem esquerda/direita.
overflow-y Especificar como o conteúdo será tratado quando o conteúdo da área de conteúdo do elemento transbordar para o topo/baixo da margem.