Overflow

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 41 di 76.

In CSS, la proprietà overflow controlla cosa succede ai contenuti che fuoriescono dal riquadro del loro elemento. Quando il contenuto di un elemento è troppo grande per rientrare nella larghezza e nell’altezza specificate, la proprietà overflow determina se ritagliare il contenuto, aggiungere barre di scorrimento o visualizzare il contenuto fuoriuscito all’esterno dei limiti dell’elemento.

Ecco la sintassi di base per usare la proprietà overflow:

selector {
    overflow: value;
}

value: Il comportamento di overflow desiderato, che può essere uno dei seguenti:

visible: Questo è il valore predefinito. Il contenuto in eccesso viene visualizzato fuori dal riquadro dell'elemento e può sovrapporsi agli elementi adiacenti.

hidden: Il contenuto che fuoriesce viene ritagliato e il resto del contenuto è invisibile.

scroll: Aggiunge barre di scorrimento (sia orizzontali che verticali) all'elemento, consentendo agli utenti di scorrere il contenuto che fuoriesce.

auto: Il browser determina se aggiungere le barre di scorrimento in base al contenuto e allo spazio disponibile. In genere, le barre di scorrimento vengono aggiunte solo quando necessario.

Per esempio:

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

In questo esempio, tutti gli elementi <div> con una larghezza di 200px e un'altezza di 100px avranno delle barre di scorrimento per visualizzare eventuali contenuti in eccesso.

Puoi anche controllare il comportamento di overflow per le direzioni orizzontale e verticale in modo indipendente usando le proprietà overflow-x e overflow-y:

.example {
    overflow-x: hidden; /* Nascondi il contenuto che eccede orizzontalmente */
    overflow-y: scroll; /* Aggiungi una barra di scorrimento verticale */
}

Sfida

Facile

Ti viene fornito un documento HTML con una divisione (<div>) che contiene un paragrafo (<p>) con un testo lungo. Il tuo compito è usare la proprietà overflow per controllare come viene visualizzato il contenuto che fuoriesce. Segui i passaggi seguenti:

Scrivi una regola CSS che selezioni l’elemento <div>. Imposta width su 300px, height su 150px e border su 1px solid black.
Imposta la proprietà overflow dell’elemento <div> su scroll per aggiungere barre di scorrimento all’elemento.

Provalo tu

<html>
<head>
    <title>Overflow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>
        <p>This is a long text that will likely overflow its container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</body>
</html>