CSS overflow
La proprietà CSS overflow controlla il contenuto traboccante (CSS2, CSS3)
La proprietà overflow gestisce come viene visualizzato il contenuto che eccede le dimensioni dell’elemento. Può essere usata per migliorare la leggibilità, evitare layout rotti e aggiungere barre di scorrimento quando necessario. È compatibile con tutte le versioni moderne di CSS.
Sintassi
Significato dei valori principali:
visible: (predefinito) il contenuto traboccante viene mostrato fuori dall’elemento.
hidden: il contenuto che supera i limiti viene nascosto.
scroll: aggiunge barre di scorrimento (orizzontali e/o verticali), anche se non necessarie.
auto: mostra le barre di scorrimento solo se necessarie.
clip: tronca il contenuto traboccante senza barre di scorrimento. Supportato in CSS3+
Esempio proprietà: overflow
Codice Esempio: overflow
.overflow-example {
width: 300px;
height: 100px;
border: 2px solid #4caf50;
overflow: hidden;
padding: 10px;
background-color: #f2f2f2;
font-size: 16px;
color: #333;
}
Contenuto Esempio: overflow
Esempio di utilizzo di overflow
In questo esempio, il contenuto traboccante è nascosto grazie a overflow: hidden:
CSS e HTML per l'elemento con overflow nascosto:
<style>
.overflow-example {
width: 300px;
height: 100px;
border: 2px solid #4caf50;
overflow: hidden;
padding: 10px;
background-color: #f2f2f2;
font-size: 16px;
color: #333;
}
</style>
<div class="overflow-example">
<div style="width: 500px;">
Questo contenuto è troppo lungo per lo spazio disponibile. Non sarà visibile oltre i confini del box.
</div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
