Overflow

No Laboratório Belavista, a ficha do workshop tem título longo e uma área de notas rolável. Overflow decide o que acontece quando o conteúdo não cabe na caixa.

O exemplo está em pacote de exemplos/54-overflow/. Abra index.html. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• Valores de overflow: visible, hidden, clip, scroll, auto.
• Eixos overflow-x / overflow-y (e ideias lógicas).
• text-overflow: ellipsis em uma linha.
• Não esconder foco nem conteúdo essencial sem alternativa.

A janela e o conteúdo

O pai é a janela de tamanho fixo. O filho quer mais espaço. Overflow define se corta, rola ou deixa vazar.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Overflow — Belavista</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <article class="ficha">
      <h1 class="titulo">Workshop intensivo de tipografia móvel e cartaz serigráfico</h1>
      <div class="notas" tabindex="0">
        <p>Traga avental. A tinta é à base d’água. Exemplos fictícios do ateliê Belavista.</p>
        <p>Horário: 9h–12h. Vagas limitadas neste exercício local.</p>
        <p>Endereço fictício: Rua das Matrizes, Recife.</p>
      </div>
    </article>
  </body>
</html>

.ficha {
  max-width: 22rem;
  padding: 1rem;
  border: 1px solid #1a3a4a;
}
.titulo {
  margin: 0 0 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notas {
  max-height: 6rem;
  overflow: auto;
  padding: 0.5rem;
  background: #faf6f1;
}
.notas:focus-visible {
  outline: 3px solid #c45c26;
  outline-offset: 2px;
}

Mude uma coisa. Em .notas, troque auto por hidden. Preveja corte sem barra. Recarregue. Confira. Depois volte a auto.

Valores

• visible — vaza (padrão).
• hidden / clip — corta; clip não cria scroll programático da mesma forma.
• scroll — barras sempre (comportamento varia).
• auto — barra só se precisar.

overflow-x e overflow-y controlam cada eixo. Um eixo hidden e outro auto é combinação comum em carrosséis horizontais.

Ellipsis

text-overflow: ellipsis exige, em geral: uma linha (white-space: nowrap), overflow diferente de visible, e largura limitada. Sem isso, a reticência não aparece.

Erro comum: overflow: hidden no container que prende o outline de foco dos filhos — o teclado “some”. Prefira cortar só onde precisa e teste Tab.

Scrollbar e mobile

Barras de rolagem ocupam espaço e mudam entre sistemas. Em telas estreitas, prefira overflow-x: auto só quando o carrossel for intencional — scroll horizontal acidental irrita. No Belavista, a ficha rola no eixo vertical (overflow: auto / overflow-y).

Arquivo no disco. Teste em 127.0.0.1 e com teclado na caixa .notas.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Quais três propriedades costumam andar juntas para reticências em uma linha?
2. overflow: auto vs hidden na caixa de notas: o que muda para o aluno?
3. Por que .notas tem tabindex="0" neste exemplo?

Respostas comentadas

1. overflow: hidden (ou equivalente), white-space: nowrap, text-overflow: ellipsis.
2. Com auto, o excesso rola; com hidden, o texto restante some sem barra.
3. Para a região rolável poder receber foco de teclado e ser percorrida com as setas.