Guida CSS interattiva: Overflow

Q: Qual è la differenza tra overflow auto e scroll?

scroll riserva sempre le barre di scorrimento, anche quando il contenuto ci sta. auto mostra una barra solo quando il contenuto è più grande del riquadro, ed è quello che di solito vuoi.

Q: Come rendo scorrevole un div?

Limita la sua dimensione e consenti lo scorrimento: max-height: 300px; overflow-y: auto;. Senza un limite di altezza o di altezza massima, il div cresce con il suo contenuto e non trabocca mai.

Q: Perché overflow-x: hidden aggiunge anche una barra di scorrimento verticale?

Se un asse è hidden, scroll o auto, un valore visible sull'altro asse viene calcolato come auto. Usa invece overflow-x: clip, che non crea un contenitore di scorrimento e lascia visibile l'altro asse.

Q: Come aggiungo un'ellissi (...) al testo che trabocca?

Per una riga: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; su un elemento con larghezza limitata. Per più righe, usa display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.

Cosa fa overflow

Quando il contenuto è più grande del suo riquadro (un'altezza fissa, una parola lunga, una tabella larga), trabocca. La proprietà overflow decide cosa succede alla parte in eccesso:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overflow values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
    .box {
      width: 150px; height: 50px; padding: 8px;
      border: 2px solid #2563eb; background: #eff6ff;
      margin-bottom: 60px;
    }
    .visible { overflow: visible; }
    .hidden { overflow: hidden; }
    .scroll { overflow: scroll; }
    .auto { overflow: auto; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box visible"><b>visible</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box hidden"><b>hidden</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box scroll"><b>scroll</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box auto"><b>auto</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
  </div>
</body>
</html>

Valore	Cosa vedi	Contenitore di scorrimento
`visible` (predefinito)	Il contenuto esce dal riquadro e si sovrappone a ciò che segue	No
`hidden`	Tagliato al bordo del padding, senza barre di scorrimento (uno script può ancora farlo scorrere)	Sì
`clip`	Tagliato, e nessuno scorrimento, nemmeno tramite script	No
`scroll`	Mostra sempre le barre di scorrimento, anche se il contenuto ci sta	Sì
`auto`	Barre di scorrimento solo quando il contenuto non ci sta	Sì

Su macOS e sui telefoni le barre di scorrimento stanno sopra il contenuto e svaniscono, quindi scroll e auto possono sembrare uguali finché non scorri.

Creare un riquadro scorrevole

Un riquadro trabocca solo se qualcosa ne limita la dimensione. Un height o un max-height, più overflow-y: auto, trasformano un elenco lungo in un pannello che scorre:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrollable list</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      max-height: 160px;
      overflow-y: auto;
      border: 1px solid #d1d5db; border-radius: 8px;
    }
    .panel p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="panel" id="panel">
    <p>Message 1</p><p>Message 2</p><p>Message 3</p><p>Message 4</p>
    <p>Message 5</p><p>Message 6</p><p>Message 7</p><p>Message 8</p>
  </div>
</body>
</html>

Qui max-height è meglio di height: un elenco corto resta corto e scorre solo un elenco lungo. A un'area scorrevole senza contenuto focalizzabile al suo interno conviene dare tabindex="0", così anche chi usa la tastiera può farla scorrere.

overflow-x e overflow-y

I due assi si possono impostare separatamente. L'uso tipico è una tabella larga che scorre di lato dentro il suo contenitore invece di allargare tutta la pagina:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal scroll</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .table-wrap { overflow-x: auto; border: 1px solid #d1d5db; max-width: 360px; }
    table { border-collapse: collapse; }
    th, td { padding: 8px 12px; white-space: nowrap; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="table-wrap" id="wrap">
    <table>
      <tr><th>Plan</th><th>Monthly</th><th>Yearly</th><th>Users</th><th>Storage</th><th>Support</th></tr>
      <tr><td>Free</td><td>$0</td><td>$0</td><td>1</td><td>1 GB</td><td>Community</td></tr>
      <tr><td>Team</td><td>$12</td><td>$120</td><td>10</td><td>100 GB</td><td>Email</td></tr>
    </table>
  </div>
</body>
</html>

Una regola da ricordare: se un asse è hidden, scroll o auto, un valore visible sull'altro asse diventa auto. Quindi overflow-x: hidden da solo può darti una barra di scorrimento verticale inattesa. overflow-x: clip non ha questo effetto:

.a { overflow-x: hidden; }  /* overflow-y computes to auto */
.b { overflow-x: clip; }    /* overflow-y stays visible */

Tagliare il testo con un'ellissi

text-overflow: ellipsis sostituisce la fine tagliata di una riga con "…". Servono tre cose insieme: una larghezza limitata, un testo che non può andare a capo e l'overflow nascosto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ellipsis</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .one-line {
      width: 240px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid #d1d5db; padding: 6px;
    }
    .three-lines {
      width: 240px; margin-top: 12px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      border: 1px solid #d1d5db; padding: 6px;
    }
  </style>
</head>
<body>
  <div class="one-line" id="one">A very long file name that will not fit in the box.pdf</div>
  <div class="three-lines" id="three">This paragraph is longer than three lines. Only the first three lines are shown and the end of the third one becomes an ellipsis, which suits card previews and search results.</div>
</body>
</html>

Il line clamp con prefisso -webkit- funziona in Chrome, Firefox e Safari. Gli screen reader leggono comunque il testo completo, quindi per loro le parole tagliate non vanno perse.

Effetti collaterali di overflow

Impostare overflow su un valore diverso da visible o clip cambia più del semplice taglio:

Contiene i float e i margini dei figli. L'elemento forma un nuovo contesto di formattazione a blocchi, quindi cresce per avvolgere i figli flottanti. display: flow-root fa lo stesso senza tagliare niente.
Rompe position: sticky al suo interno. Un figlio sticky si attacca al contenitore di scorrimento più vicino; se quel contenitore non scorre, non si attacca niente.
Taglia i figli posizionati in modo assoluto (quando l'elemento che trabocca è anche il loro blocco contenitore), compresi menu a tendina e tooltip, e taglia anche le ombre dei figli.

Nascondere la barra di scorrimento

Puoi mantenere un riquadro scorrevole nascondendo la sua barra con scrollbar-width: none. Usalo con moderazione: senza barra di scorrimento, molti lettori non si accorgono che c'è altro contenuto. scrollbar-gutter: stable fa il lavoro opposto: riserva lo spazio della barra, così il contenuto non si sposta quando compare.

Errori comuni

Aspettarsi un overflow senza limite di dimensione. Un riquadro senza height o max-height cresce invece di traboccare.
overflow: hidden su body per "sistemare" lo scorrimento orizzontale. Trova invece l'elemento troppo largo (spesso un width fisso, un URL lungo o 100vw con una barra di scorrimento).
Ellissi senza white-space: nowrap. Il testo va a capo, quindi niente trabocca in orizzontale e l'ellissi non compare.
overflow-x: hidden che crea una barra di scorrimento verticale. Usa clip.
Un menu a tendina tagliato dalla sua card. L'overflow: hidden della card lo taglia; sposta la regola overflow o disegna il menu fuori dalla card.

Domande frequenti

Cosa fa overflow: hidden?

Taglia il contenuto che non entra nel riquadro di padding dell'elemento, senza barre di scorrimento. La parte nascosta si può comunque raggiungere scorrendo tramite script o mettendo il focus su qualcosa al suo interno.

Qual è la differenza tra overflow auto e scroll?

scroll riserva sempre le barre di scorrimento, anche quando il contenuto ci sta. auto mostra una barra solo quando il contenuto è più grande del riquadro, ed è quello che di solito vuoi.

Come rendo scorrevole un div?

Limita la sua dimensione e consenti lo scorrimento: max-height: 300px; overflow-y: auto;. Senza un limite di altezza o di altezza massima, il div cresce con il suo contenuto e non trabocca mai.

Perché overflow-x: hidden aggiunge anche una barra di scorrimento verticale?

Se un asse è hidden, scroll o auto, un valore visible sull'altro asse viene calcolato come auto. Usa invece overflow-x: clip, che non crea un contenitore di scorrimento e lascia visibile l'altro asse.

Come aggiungo un'ellissi (...) al testo che trabocca?

Per una riga: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; su un elemento con larghezza limitata. Per più righe, usa display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.

Concetti correlati