Proprietà css overflow: visible, hidden, scroll e auto
La proprietà CSS overflow indica al browser che fare con il contenuto che supera il suo blocco contenitore. Il quale vuole dire che viene applicato ad un elemento di misura fissa.
Se i valori per width (larghezza) e/o height (altezza) non vengono specificati, la proprietà overflow sarà inutile ed il blocco contenitore si ridimensionerà in base al suo contenuto.
La proprietà overflow accetta 4 valori: visible (visibile), hidden (nascosto), scroll (scorrevole) ed auto.
1. overflow: visible;
Il valore visible (visibile) indica che il contenuto può fuori uscire liberamente del suo elemento contenitore.
Esempio d’overflow: visible;
- overflow: visible;
- width: 350px;
- height: 50px;
- border: 1px solid black;
- padding: 10px;
- color:#FF3300;
2. overflow: hidden;
Il valore hidden (nascosto) indica che il contenuto in eccesso è nascosto e non visibile dall’utente.
Esempio d’overflow: hidden;
3. overflow: scroll;
Il valore scroll (scorrevole) indica che saranno sempre aggiunte barre di scorrimento verticale e orizzontale che sono necessarie o no.
Esempio d’overflow: scroll;
- overflow: scroll;
- width: 350px;
- height: 50px;
- border: 1px solid black;
- padding: 10px;
- color:#FF3300;
4. overflow: auto;
Il valore auto indica che saranno aggiunte barre di scorrimento verticale e/od orizzontale solo se sono necessarie.
In generale il valore auto è il valore usato in preferenza al valore scroll
Esempio d’overflow: auto;
- overflow: auto;
- width: 350px;
- height: 50px;
- border: 1px solid black;
- padding: 10px;
- color:#FF3300;
Registrati al nostro Rss Feed e rimani sempre aggiornati con i nuovi articoli...
[...] e scroll orizzontale (potrebbero essere aggiunti via javascript o per il scroll con la proprietà css overflow), ecco il [...]