Overlowing in HTML5

Una volta che iniziamo il percorso per apportare modifiche alle dimensioni degli elementi e dei loro contenitori, arriva sempre un momento in cui i due non sono più compatibili e otteniamo il terribile effetto di straripamento o overflow, che altro non è che l'effetto che un elemento è più grande di un altro e cade dal suo contenitore.
Vediamo un classico esempio di un elemento che è molto piccolo per il suo contenuto e che genera un overflow, in quanto tutto è più facile da vedere attraverso degli esempi, prima vediamone uno prima di passare a vedere le proprietà che ci aiutano a controllare l'overflow.

 Esempio
Ci sono molti tipi diversi di frutta - ci sono oltre 500 varietà di banane da sole. Quando aggiungiamo gli innumerevoli tipi di mele, arance e altri frutti ben noti, ci troviamo di fronte a migliaia di scelte.

Il codice precedente genera il seguente risultato nel browser:

Come possiamo vedere il testo sul passaggio della capacità della scatola contenitore, per correggere questo possiamo usare la proprietà straripamento, esaminiamo le proprietà prima di procedere alla correzione di questo problema:

overflow-x / overflow-y: Determinano il comportamento del trabocco orizzontale o verticale.

Trabocco: È una scorciatoia per utilizzare la proprietà precedente e l'ordine in cui funziona è overflow, overflow x, overflow y.

Le proprietà che possono essere utilizzate con l'elemento straripamento sono come segue:

auto: Questo valore delega al browser la responsabilità di decidere cosa fare, di solito ciò che accade è che viene mostrata una barra di scorrimento quando l'elemento inizia a traboccare che lo contiene.

nascosto: Il contenuto viene mostrato fino alla parte che non trabocca, nascondendo il resto del contenuto, non ha meccanismi per dire all'utente cosa fare per vedere il resto del contenuto.

nessun contenuto: Il contenuto in overflow viene rimosso se non può essere inserito nel contenitore. Questo valore non è supportato da nessuno dei browser più diffusi

nessuna visualizzazione: Il contenuto è nascosto se non può essere visualizzato completamente. Questo valore non è supportato da nessuno dei browser più diffusi.

scorrere: Il browser genera una barra di scorrimento che consente all'utente di vedere sempre il contenuto in overflow all'interno del contenitore. La barra dipenderà dal browser e dal sistema per definire il modo in cui viene visualizzata. La barra di scorrimento sarà sempre visibile anche se l'elemento non trabocca.

visibile: Questo è il valore predefinito. Il contenuto viene sempre visualizzato anche in caso di overflow.

Ora che abbiamo gli strumenti per attaccare un overflow, vediamo in pratica come possiamo applicarlo, niente di meglio di un piccolo codice per dimostrarlo:

 Esempio
Ci sono molti tipi diversi di frutta - ci sono oltre 500 varietà di banane da sole. Quando aggiungiamo gli innumerevoli tipi di mele, arance e altri frutti ben noti, ci troviamo di fronte a migliaia di scelte.
Ci sono molti tipi diversi di frutta - ci sono oltre 500 varietà di banane da sole. Quando aggiungiamo gli innumerevoli tipi di mele, arance e altri frutti ben noti, ci troviamo di fronte a migliaia di scelte.

Abbiamo usato due elementi per dimostrare come il straripamento, nella prima posizioniamo la proprietà nascosto dove sappiamo che verrà mostrato solo il contenuto fino a dove inizia l'overflow, poi il resto viene nascosto e per il secondo usiamo scroll, con cui verrà mostrata una scroll bar se l'elemento overflow o meno, vediamo il risultato:

Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo