Proprietà overflow CSS | Spiegato

Durante lo sviluppo di siti Web ci troviamo spesso in situazioni in cui il contenuto presente in determinati elementi HTML trabocca. Puoi scegliere cosa fare con il contenuto traboccante utilizzando la proprietà Overflow CSS. Questo post è progettato per illuminare i suoi lettori sui dettagli della proprietà di Overflow in CSS.

Questo tutorial copre.

1. Proprietà overflow
2. Valore visibile
3. Valore nascosto
4. Valore automatico
5. Overflow-X e Overflow-y

Cominciamo.

Proprietà overflow

La proprietà di Overflow controlla il comportamento del contenuto che trabocca l'area specificata di un elemento, inoltre, la proprietà di Overflow è progettata solo per elementi a livello di blocco.

Come altre proprietà CSS, la proprietà di Overflow mostra anche determinati valori che sono spiegati in profondità di seguito.

Valore visibile

Questo è un valore predefinito della proprietà overflow. Supponiamo che se il contenuto è posizionato all'interno di una scatola e è traboccante, questo valore visualizzerà il contenuto che supera l'area della casella. Inoltre, il contenuto che viene visualizzato al di fuori del confine della scatola non disturberà l'allineamento di altri elementi circostanti.

Ecco un esempio di questo valore.

Html

Durante lo sviluppo di siti Web ci troviamo spesso in situazioni in cui il contenuto presente in determinati elementi HTML trabocca. Puoi scegliere cosa fare con il contenuto traboccante utilizzando la proprietà Overflow CSS.

CSS

Produzione

Passando al valore successivo.

Valore nascosto

Il valore nascosto della proprietà di Overflow nasconde tutto il contenuto che sta superando l'area della scatola. Questa proprietà dovrebbe essere gestita con cura perché il contenuto che questa proprietà nasconde è completamente invisibile all'utente, tuttavia è più adatto per la visualizzazione di contenuti di natura dinamica. Di seguito è un esempio del valore nascosto.

Produzione

Il contenuto che supera l'area della scatola è stato nascosto.

Valore di scorrimento

Questo valore nasconde il contenuto che supera l'area della casella all'interno della casella e fornisce barre di scorrimento sia verticali che orizzontali per visualizzare il contenuto. Ecco un esempio.

Produzione

Le barre di scorrimento sono state aggiunte.

Valore automatico

Questo valore ha una funzione simile al valore di scorrimento, tuttavia, ciò che lo rende diverso dal valore di scorrimento è che aggiunge barre di scorrimento alla casella solo quando il contenuto sta superando l'area della casella. Inoltre, aggiungerà solo il tipo di barra di scorrimento richiesto. Ecco un esempio.

Produzione

Il valore automatico della proprietà di overflow ha applicato correttamente.

Overflow-X e Overflow-y

Queste sono ulteriori due proprietà che controllano ciò che accade al contenuto traboccante in orizzontale o in verticale. La proprietà Overflow-X controlla il comportamento orizzontale del contenuto mentre la proprietà overflow-y determina il comportamento verticale del contenuto. Ecco un esempio.

Nell'esempio sopra, la proprietà Overflow-X è stato assegnato il valore di scorrimento e Overflow-Y è stato assegnato un valore nascosto a seguito del contenuto che supera l'area della casella e la scatola avrà una barra di scorrimento verticale.

Produzione

Conclusione

La proprietà di Overflow viene utilizzata per controllare il comportamento del contenuto che trabocca l'area specificata di un elemento, inoltre, la proprietà di Overflow è progettata solo per elementi a livello di blocco. La proprietà di Overflow rende quattro valori che sono; visibile, scorrimento, nascosto E auto. Esistono ulteriori due proprietà che controllano ciò che accade al contenuto traboccante in orizzontale o in verticale che sono; Overflow-X E overflow-y. Questo post discute in profondità la proprietà di Overflow con l'aiuto di esempi adeguati.