Layout CSS - Sopraffusione

CSS overflow property controlla come viene gestito il contenuto che è troppo grande per essere contenuto nell'area specificata.

Questo testo è molto lungo e l'altezza del contenitore è solo di 100 pixel. Pertanto, è stata aggiunta una barra di scorrimento per aiutare i lettori a scorrere il contenuto. Questo testo è molto lungo e l'altezza del contenitore è solo di 100 pixel. Pertanto, è stata aggiunta una barra di scorrimento per aiutare i lettori a scorrere il contenuto. Questo testo è molto lungo e l'altezza del contenitore è solo di 100 pixel. Pertanto, è stata aggiunta una barra di scorrimento per aiutare i lettori a scorrere il contenuto. Questo testo è molto lungo e l'altezza del contenitore è solo di 100 pixel. Pertanto, è stata aggiunta una barra di scorrimento per aiutare i lettori a scorrere il contenuto. Questo testo è molto lungo e l'altezza del contenitore è solo di 100 pixel. Pertanto, è stata aggiunta una barra di scorrimento per aiutare i lettori a scorrere il contenuto. Questo testo è molto lungo e l'altezza del contenitore è solo di 100 pixel. Pertanto, è stata aggiunta una barra di scorrimento per aiutare i lettori a scorrere il contenuto. Questo testo è molto lungo e l'altezza del contenitore è solo di 100 pixel. Pertanto, è stata aggiunta una barra di scorrimento per aiutare i lettori a scorrere il contenuto. Questo testo è molto lungo e l'altezza del contenitore è solo di 100 pixel. Pertanto, è stata aggiunta una barra di scorrimento per aiutare i lettori a scorrere il contenuto. Questo testo è molto lungo e l'altezza del contenitore è solo di 100 pixel. Pertanto, è stata aggiunta una barra di scorrimento per aiutare i lettori a scorrere il contenuto. Questo testo è molto lungo e l'altezza del contenitore è solo di 100 pixel. Pertanto, è stata aggiunta una barra di scorrimento per aiutare i lettori a scorrere il contenuto. Questo testo è molto lungo e l'altezza del contenitore è solo di 100 pixel. Pertanto, è stata aggiunta una barra di scorrimento per aiutare i lettori a scorrere il contenuto.

Prova personalmente

CSS Overflow

overflow L'attributo specifica se, quando il contenuto dell'elemento è troppo grande per essere inserito nell'area specificata, il contenuto deve essere tagliato o una barra di scorrimento deve essere aggiunta.

overflow L'attributo può impostare i seguenti valori:

  • visible - Di default. L'overflow non viene tagliato. Il contenuto viene visualizzato al di fuori del riquadro dell'elemento
  • hidden - L'overflow viene tagliato e il contenuto rimanente non sarà visibile
  • scroll - L'overflow viene tagliato e una barra di scorrimento viene aggiunta per vedere il contenuto rimanente
  • auto - Con scroll Simile, ma aggiunge la barra di scorrimento solo quando necessario

Nota:overflow L'attributo si applica solo agli elementi bloccati con altezza specificata.

Nota:In OS X Lion (sul Mac), la barra di scorrimento è nascosta di default e viene visualizzata solo quando utilizzata (anche se impostato "overflow:scroll").

overflow: visible

Di default, l'overflow è visibile (visible) il che significa che non sarà tagliato, ma verrà visualizzato al di fuori del riquadro dell'elemento:

Quando si desidera controllare meglio la disposizione, è possibile utilizzare l'attributo overflow. L'attributo overflow specifica cosa accade se il contenuto supera il riquadro dell'elemento.

Esempio

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

Prova personalmente

overflow: hidden

Se si utilizza hidden Il valore, l'overflow sarà tagliato e il contenuto rimanente sarà nascosto:

Quando si desidera controllare meglio la disposizione, è possibile utilizzare l'attributo overflow. L'attributo overflow specifica cosa accade se il contenuto supera il riquadro dell'elemento.

Esempio

div {
  overflow: hidden;
}

Prova personalmente

overflow: scroll

Se il valore è impostato su scrollL'overflow sarà tagliato e una barra di scorrimento sarà aggiunta per lo scorrimento all'interno del riquadro. Notare che questo aggiungerà una barra di scorrimento sia in orizzontale che in verticale (anche se non necessario):

Quando si desidera controllare meglio la disposizione, è possibile utilizzare l'attributo overflow. L'attributo overflow specifica cosa accade se il contenuto supera il riquadro dell'elemento.

Esempio

div {
  overflow: scroll;
}

Prova personalmente

overflow: auto

auto Il valore è simile a scrollma aggiunge la barra di scorrimento solo quando necessario:

Quando si desidera controllare meglio la disposizione, è possibile utilizzare l'attributo overflow. L'attributo overflow specifica cosa accade se il contenuto supera il riquadro dell'elemento.

Esempio

div {
  overflow: auto;
}

Prova personalmente

overflow-x e overflow-y

overflow-x e overflow-y L'attributo determina se il contenuto deve essere modificato solo in orizzontale o verticale (o entrambi) per superare il riquadro:

  • overflow-x Specificare come gestire i margini sinistri/destra del contenuto.
  • overflow-y Specificare come gestire i margini superiori/inferiori del contenuto.
Quando si desidera controllare meglio la disposizione, è possibile utilizzare l'attributo overflow. L'attributo overflow specifica cosa accade se il contenuto supera il riquadro dell'elemento.

Esempio

div {
  overflow-x: hidden; /* Nascondi barra di scorrimento orizzontale */
  overflow-y: scroll; /* Aggiungi barra di scorrimento verticale */
}

Prova personalmente

Tutte le proprietà CSS Overflow

Proprietà Descrizione
overflow Specificare cosa accade se il contenuto supera la cornice dell'elemento.
overflow-x Specificare come gestire i margini sinistri/destra del contenuto quando il contenuto dell'elemento supera l'area del contenuto.
overflow-y Specificare come gestire i margini superiori/inferiori del contenuto quando il contenuto dell'elemento supera l'area del contenuto.