La proprietà CSS overflow controlla quello che accade al contenuto che è troppo grande per stare in un'area.

CSS Overflow

La proprietà overflow specifica se tagliare il contenuto o aggiungere delle scrollbars quando il contenuto di un elemento è troppo grande per stare in una specificata area.

La proprietà overflow ha i seguenti valori:

• visible - Default. Il sovra flusso non viene tagliato. Il contenuto viene visualizzato all'esterno della casella dell'elemento.
• hidden - Il sovra flusso viene tagliato, il resto del contenuto sarà invisibile
• scroll - Il sovra flusso viene tagliato, e uno scrollbar è aggiunto per vedere il resto del contenuto
• auto - Simile a scroll, ma aggiunge scrollbars solo quando è necessario

overflow: visible

Di default, la proprietà overflow è impostata a visible, quindi non è tagliata e il sovra flusso viene visualizzato al di fuori della casella dell'elemento.

Esempio

div {
  width: 200px;
  height: 65px;
  background-color: coral;
  overflow: visible;
}

Visualizza esempio

overflow: hidden

Col valore hidden, il sovra flusso è tagliato e il reso del contenuto è nascosto.

Esempio

div {
  overflow: hidden;
}

Visualizza esempio

overflow: scroll

Impostando il valore a scroll, il sovra flusso è tagliato e uno scrollbar è aggiunto all'interno della casella. Da notare che questo aggiungerà uno scrollbar sia orizzontalmente e verticalmente (anche se non ne ha bisogno).

Esempio

div {
  overflow: scroll;
}

Visualizza esempio

overflow: auto

Il valore auto è simile a scroll, ma aggiunge le scrollbars solo quando è necessario.

Esempio

div {
  overflow: auto;
}

Visualizza esempio

overflow-x e overflow-y

Le proprietà overflow-x e overflow-y specificano se cambiare il sovra flusso del contenuto solo orizzontalmente o verticalmente (o entrambi):

• overflow-x specifica cosa fare con i bordi sinistro/destro del contenuto.
• overflow-y specifica cosa fare con i bordi superiore/inferiore del contenuto.

Esempio

div {
  overflow-x: hidden; /* nasconde lo scrollbar orizzontale */
  overflow-y: scroll; /* Aggiunge lo scrollbar verticale */
}

Visualizza esempio

Tutte le proprietà CSS di overflow