Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Gestione dell'Overflow dei Contenuti in CSS | Padronanza del Posizionamento CSS
Tecniche CSS Avanzate

bookGestione 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 come scroll. 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.html

index.css

index.css

copy

scroll

È possibile visualizzare l'intero contenuto dell'elemento utilizzando una barra di scorrimento. Vediamo l'esempio:

index.html

index.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

Cosa fa la proprietà overflow?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 12

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Suggested prompts:

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

bookGestione 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 come scroll. 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.html

index.css

index.css

copy

scroll

È possibile visualizzare l'intero contenuto dell'elemento utilizzando una barra di scorrimento. Vediamo l'esempio:

index.html

index.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

Cosa fa la proprietà overflow?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 12
some-alt