CONTATTACI

Blog

Overflow css: tutti i valori della proprietà

Avere una certa confidenza con il linguaggio CSS è fondamentale se si aspira a diventare sviluppatore front end. Questo linguaggio possiede una serie di proprietà e regole che, se padroneggiate, permettono di personalizzare in maniera molto dettagliata e personale il proprio sito web.

CSS, cos è?

Cascading Style-Sheets, identifica il linguaggio di markup per realizzare i nostri fogli di stile. CSS, insieme al linguaggio HTML e al linguaggio Javascript rappresenta uno degli strumenti fondamentali per il web development. Interagisce prevalentemente con l’HTML e consente allo sviluppatore di specificare le caratteristiche degli elementi della pagina web (font, layout, immagini…) tutto attraverso specifiche regole e proprietà.

In questo articolo parleremo proprio della proprietà overflow CSS. Una delle più importanti di questo linguaggio, in quanto permette di controllare ciò che accade quando il contenuto di un elemento è troppo grande per entrare in un'area. Quando ciò accade, il contenuto "trabocca" in un'altra area, orizzontalmente (asse X) o verticalmente (asse Y). I principali valori della proprietà overflow sono i seguenti:

  • Visible: Questo è il valore predefinito che assume la proprietà overflow se non ne viene specificato alcuno. Con questa proprietà, possiamo vedere chiaramente il nostro contenuto quando inonda in un'altra area della pagina web. Vediamo insieme un esempio. 
<div>
    <p>
        Aulab Hackademy è il Corso di Coding Online per Diventare Sviluppatore Web in 3 mesi. Lezioni
        in diretta live streaming, esercitazioni pratiche seguite dai tutor e materiale didattico su
        piattaforma online.
    </p>
</div>
body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
}

p{
    color: green;
}

In questo caso il testo si trova comodamente nel contenitore bianco senza oltrepassare il bordo del contenitore su entrambi gli assi. Ma non è sempre così.

Potresti lavorare a un progetto e poi renderti conto che un pezzo di testo attraversa il confine. Qualcosa come questo:

<div>
    <p>
        Aulab Hackademy è il Corso di Coding Online per Diventare Sviluppatore Web in 3 mesi. Lezioni
        in diretta live streaming, esercitazioni pratiche seguite dai tutor e materiale didattico su
        piattaforma online. Aulab Hackademy è il Corso di Coding Online per Diventare Sviluppatore
        Web in 3 mesi. Lezioni in diretta live streaming, esercitazioni pratiche seguite dai tutor e
        materiale didattico su piattaforma online. Aulab Hackademy è il Corso di Coding Online per
        Diventare Sviluppatore Web in 3 mesi. Lezioni in diretta live streaming, esercitazioni
        pratiche seguite dai tutor e materiale didattico su piattaforma online.
    </p>
</div>

Lo stile CSS rimane lo stesso. Ma il testo sforerà dalle dimensioni del contenitore bianco che lo contiene. In un progetto di vita reale, questo sarebbe ancora più fastidioso perché avresti questo testo sovrapposto ad altri elementi della pagina. Siamo in grado di vedere l'overflow del testo in un'altra area (che non sia il suo contenitore), perché il valore predefinito qui è visible anche se non lo abbiamo specificato.

Aggiungiamolo al codice CSS in modo da poter vedere la proprietà applicata: 

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
    overflow: visible;
}

p{
    color: green;
}

Anche dopo aver specificato la proprietà overflow a visible, il risultato rimarrà lo stesso. Serve sfruttare altri valori della proprietà overflow CSS per risolvere questo problema.

  • Hidden: Con Hidden la parte del testo che fuoriesce dal proprio contenitore verrà ritagliata, tanto da diventare “invisibile”. Non devi preoccuparti dello spazio occupato dall'overflow. Una volta che il contenuto è stato ritagliato, non si troverà più nell'area in cui è traboccato. Vedremo un esempio prima di parlare del motivo per cui questa non è la soluzione migliore. Aggiungiamo il valore nascosto:
body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
    overflow: hidden;
}

p{
    color: green;
}

Grazie al valore hidden risolviamo il problema di avere contenuti in un'area in cui non dovrebbero esserci, ma non fornisce un modo per accedere ai contenuti che sono stati tagliati.

  • Scroll: Quindi sappiamo che il valore hidden taglia e nasconde il che inonda elementi che non lo contengono. Ma il valore scroll taglia anche il testo e fornisce una barra di scorrimento in modo che possiamo scorrere e vedere la parte del testo che è stata tagliata.
body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
    overflow: scroll;
}

p{
    color: green;
}

Ora abbiamo le barre di scorrimento su entrambi gli assi. Il testo risulterà visibile nella sua totalità e non inonderà gli elementi circostanti.

  • Auto: Assegnando il valore auto la barra di scorrimento appare solo verticalmente. Questo valore rileva la posizione dell'overflow del testo e aggiunge una barra di scorrimento in quella direzione.

Nessuna barra di scorrimento è stata aggiunta orizzontalmente perché non abbiamo overflow del contenuto in quell'asse.

  • overflow-x e overflow-y: specificano ciò che accade orizzontalmente e verticalmente. Vuol dire che posso usare i valori appena elencati solo in una direzione, a seconda dell’asse scelto.

Attraverso questo tutorial potrai imparare il controllo dell’overflow di un contenuto all’interno di una pagina web, che non sia obbligatoriamente un testo. Per approfondire e migliorare la tua abilità con il linguaggio CSS, consulta il nostro articolo sugli esercizi CSS e la nostra guida html e css in italiano

 

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.