I CSS controllano l'overflow del contenuto attraverso tre proprietà: overflow, overflow-x e overflow-y. La prima controlla sia l'overflow verticale che quello orizzontale, la seconda solo l'overflow orizzontale e la terza solo quello verticale. Ma quando si devono applicare queste tre proprietà?
L'overflow nei CSS si applica quando un elemento si dice constrained. Per constrained si intende un elemento che ha una o entrambe le dimensioni specificate.
Quando si specifica una dimensione per un elemento, i browser assegnano a quell'elemento una restrizione oltre la quale il contenuto in eccesso si dice essere in overflow.
Un tipico esempio è quando un elemento figlio ha dimensioni maggiori dell'elemento genitore:
#parent {
width: 200px;
}
#child {
width: 250px;
}
Le specifiche CSS stabiliscono che nel caso di overflow l'impostazione predefinita dovrà permettere all'utente di visualizzare il contenuto in eccesso (overflow: visible). Nel nostro esempio l'elemento figlio fuoriuscirà da quello genitore.
Tale comportamento si può modificare. Ad esempio possiamo sopprimere la visualizzazione del contenuto fuoriuscito dal genitore:
#parent {
width: 200px;
overflow: hidden;
}
#child {
width: 250px;
}
In questo caso i pixel in eccesso verranno tagliati e non visualizzati e l'elemento figlio apparirà sempre all'interno di quello genitore. Un'altra opzione possibile è quella di mostrare delle barre di scorrimento per permettere all'utente di visualizzare il contenuto in eccesso:
#parent {
width: 200px;
overflow: scroll;
}
#child {
width: 250px;
}
In questo caso il contenuto in eccesso sarà accessibile e visibile solo scrollando la barra di scorrimento che apparirà sull'elemento genitore. Un tipico esempio di questa situazione è quando gestiamo l'overflow sui blocchi di codice.
Esiste infine un'ultima possibilità: lasciare che sia il browser a decidere come gestire il contenuto in eccesso. Questo si può ottenere con il valore auto:
#parent {
width: 200px;
overflow: auto;
}
#child {
width: 250px;
}
Questo valore dipende dal contesto. In alcuni casi i browser lo interpreteranno come visible, in altri come scroll. Nel nostro esempio vale il primo caso, mentre nei blocchi di codice si applica la seconda possibilità.
Il caso dei blocchi di codice è un tipico esempio di come il testo influisca sul contenuto in eccesso. Un testo preformattato tende a non seguire le restrizioni imposte dal blocco contenitore, come invece accade ad esempio per i paragrafi.
Un altro esempio sono i link testuali. Nel caso delle tabelle, infatti, non è raro osservare i link fuoriuscire dalle celle. Questo caso non è mai stato chiarito dalle specifiche, anche se è evidente che gli elementi a non vengono trattati dai browser come normali elementi inline in situazioni come questa.