Gestione dell'Overflow dei Contenuti in CSS
Consideriamo come possiamo controllare l'overflow del contenuto tramite una sola proprietà. A volte capita di avere una width
e una height
fisse per l'elemento. Tuttavia, il contenuto interno può essere molto più grande dello spazio disponibile. La proprietà overflow
controlla il comportamento del contenuto di un elemento quando supera i valori di height
o width
impostati esplicitamente per l'elemento.
overflow: visible | scroll | hidden | auto
visible
- è il valore predefinito. Il contenuto oltrepassa i bordi dell'elemento e rimane visibile;scroll
- Il contenuto oltrepassa i bordi dell'elemento e compare una barra di scorrimento che consente all'utente di scorrere sia verticalmente che orizzontalmente;hidden
- Il contenuto che oltrepassa le dimensioni dei bordi dell'elemento viene tagliato e non è visibile;auto
- funziona comescroll
. Tuttavia, le barre di scorrimento compaiono solo quando il contenuto oltrepassa i bordi dell'elemento.
Nota
Il contenuto in overflow non influisce sulla geometria degli altri elementi.
visible
Se la proprietà overflow
non è impostata, il suo valore predefinito è visible
. Significa che il contenuto verrà visualizzato al di fuori dei bordi dell'elemento. Nell'esempio, i bordi della box sono evidenziati in darkblue
e la box ha proprietà width
e height
fisse.
index.html
index.css
scroll
È possibile visualizzare l'intero contenuto dell'elemento utilizzando una barra di scorrimento. Vediamo l'esempio:
index.html
index.css
hidden
Tutti i contenuti in overflow saranno nascosti e l’utente non li vedrà mai. Generalmente, è utile solo quando è necessario sviluppare alcuni effetti decorativi.
index.html
index.css
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Can you show examples of how each overflow value looks in practice?
What are some common use cases for each overflow property?
How does overflow interact with other CSS properties like position or display?
Awesome!
Completion rate improved to 2.04
Gestione dell'Overflow dei Contenuti in CSS
Scorri per mostrare il menu
Consideriamo come possiamo controllare l'overflow del contenuto tramite una sola proprietà. A volte capita di avere una width
e una height
fisse per l'elemento. Tuttavia, il contenuto interno può essere molto più grande dello spazio disponibile. La proprietà overflow
controlla il comportamento del contenuto di un elemento quando supera i valori di height
o width
impostati esplicitamente per l'elemento.
overflow: visible | scroll | hidden | auto
visible
- è il valore predefinito. Il contenuto oltrepassa i bordi dell'elemento e rimane visibile;scroll
- Il contenuto oltrepassa i bordi dell'elemento e compare una barra di scorrimento che consente all'utente di scorrere sia verticalmente che orizzontalmente;hidden
- Il contenuto che oltrepassa le dimensioni dei bordi dell'elemento viene tagliato e non è visibile;auto
- funziona comescroll
. Tuttavia, le barre di scorrimento compaiono solo quando il contenuto oltrepassa i bordi dell'elemento.
Nota
Il contenuto in overflow non influisce sulla geometria degli altri elementi.
visible
Se la proprietà overflow
non è impostata, il suo valore predefinito è visible
. Significa che il contenuto verrà visualizzato al di fuori dei bordi dell'elemento. Nell'esempio, i bordi della box sono evidenziati in darkblue
e la box ha proprietà width
e height
fisse.
index.html
index.css
scroll
È possibile visualizzare l'intero contenuto dell'elemento utilizzando una barra di scorrimento. Vediamo l'esempio:
index.html
index.css
hidden
Tutti i contenuti in overflow saranno nascosti e l’utente non li vedrà mai. Generalmente, è utile solo quando è necessario sviluppare alcuni effetti decorativi.
index.html
index.css
Grazie per i tuoi commenti!