Overflow - Trucchi CSS

La overflowproprietà controlla cosa succede al contenuto che si rompe al di fuori dei suoi limiti: immagina un divin cui hai impostato esplicitamente una larghezza di 200 px, ma contiene un'immagine larga 300 px. Quell'immagine sporgerà dal div e sarà visiblepredefinita. Mentre se imposti il overflowvalore su hidden, l'immagine verrà tagliata a 200px.

div ( overflow: visible | hidden | scroll | auto | inherit )

Valori

• visible: il contenuto non viene ritagliato quando procede fuori dalla sua scatola. Questo è il valore predefinito della proprietà
• hidden: il contenuto traboccante verrà nascosto.
• scroll: simile a nascosto, tranne per il fatto che gli utenti potranno scorrere il contenuto nascosto
• auto: se il contenuto procede fuori dalla sua casella, quel contenuto verrà nascosto mentre una barra di scorrimento dovrebbe essere visibile per consentire agli utenti di leggere il resto del contenuto.
• initial: utilizza il valore predefinito che è visible
• inherit: imposta l'overflow sul valore del suo elemento genitore.

Ricorda che il testo andrà a capo naturalmente alla fine di un elemento (a meno che lo spazio bianco non venga modificato) quindi il testo raramente sarà la causa dell'overflow. A meno che non sia impostata un'altezza, il testo spingerà anche un elemento più in alto. L'overflow entra in gioco più comunemente quando sono impostate larghezze e altezze esplicite e sarebbe indesiderabile che qualsiasi contenuto fuoriuscisse o quando lo scorrimento viene esplicitamente evitato.

Visibile

Se non si imposta affatto la proprietà di overflow, l'impostazione predefinita è visibile. Quindi, in generale, non c'è motivo per impostare esplicitamente questa proprietà su visibile a meno che non la si sovrascriva dall'impostazione altrove.

La cosa importante da ricordare qui è che anche se il contenuto è visibile fuori dal riquadro, quel contenuto non influisce sul flusso della pagina. Per esempio:

In generale, non dovresti comunque impostare altezze statiche su scatole con testo web in esse, quindi non dovrebbe apparire.

Nascosto

L'opposto del visibile predefinito è nascosto . Questo nasconde letteralmente qualsiasi contenuto che si estende oltre la scatola.

Ciò è particolarmente utile in caso di utilizzo con contenuto dinamico e la possibilità che un overflow causi seri problemi di layout. Tuttavia, tieni presente che il contenuto nascosto in questo modo è completamente inaccessibile (a meno di visualizzare la fonte). Quindi, ad esempio, un utente ha la dimensione del carattere predefinita impostata più grande di quanto ti aspetteresti, potresti spingere il testo fuori da una casella e nasconderlo completamente dalla sua vista.

Scorrere

L'impostazione del valore di overflow di una casella per lo scorrimento nasconderà il contenuto dal rendering all'esterno della casella, ma offrirà barre di scorrimento per scorrere l'interno della casella per visualizzare il contenuto.

Da notare con questo valore è che si ottengono ENTRAMBE le barre di scorrimento orizzontali e verticali, indipendentemente da cosa, anche se il contenuto richiede solo l'una o l'altra.

Lo scorrimento momentum di iOS può essere abilitato per questo valore con -webkit-overflow-scrolling.

Nota: in OS X Lion, quando le barre di scorrimento sono impostate per essere visualizzate solo quando vengono utilizzate, scrollsi comporta in modo più simile auto, in quanto verranno visualizzate solo le barre di scorrimento necessarie.

Auto

L'overflow automatico è molto simile al valore di scorrimento, solo che risolve il problema di ottenere le barre di scorrimento quando non ne hai bisogno. Le barre di scorrimento verranno visualizzate solo se è presente del contenuto che effettivamente esce dall'elemento.

overflow-x e overflow-y

È anche possibile manipolare l'overflow del contenuto orizzontalmente o verticalmente con le proprietà overflow-xe overflow-y. Ad esempio nella demo sotto è possibile scorrere l'overflow orizzontale mentre il testo che si estende oltre l'altezza del riquadro è nascosto:

.box ( overflow-y: hidden; overflow-x: scroll; )

Compensazione del galleggiante

Uno degli usi più popolari dell'impostazione dell'overflow, abbastanza stranamente, è il float clearing. L'impostazione di overflow non cancella il float sull'elemento, si cancella automaticamente. Ciò significa che l'elemento con overflow (qualsiasi valore eccetto visible) si estenderà tanto quanto ha bisogno di comprendere elementi figli all'interno che sono flottati (invece di collassare), assumendo che l'altezza non sia dichiarata. Come questo:

Una tecnica di cancellazione del float migliore è clearfix, poiché non richiede di alterare la proprietà di overflow in un modo non necessario.

Generazione del contesto di formattazione del blocco

È interessante notare che overflowcreerà anche un nuovo contesto di formattazione del blocco che è utile se vogliamo allineare un elemento di blocco accanto a uno float. Nell'esempio seguente mostriamo come un numero di paragrafi interagirà con un'immagine flottata per impostazione predefinita e quindi usiamo overflow: hiddenper allineare il testo all'interno della sua casella:

Questo viene da un ottimo post di Nicole Sullivan che ha ispirato l'oggetto dei media.

Le barre di scorrimento possono essere stilizzate con CSS?

Prima eri in grado di applicare lo stile alle barre di scorrimento in IE (v5.5?) Ma non di più. Ora puoi modificarli di nuovo nei browser WebKit. Se hai bisogno di barre di scorrimento personalizzate cross-browser, guarda JavaScript.

Se a un elemento è necessario aggiungere barre di scorrimento per onorare il valore di overflow, Firefox le inserisce all'esterno dell'elemento, mantenendo la larghezza / altezza visibile dichiarata. IE inserisce le barre di scorrimento all'interno, mantenendo la larghezza / altezza complessive dichiarate.

Demo

Demo per questo articolo tratte da questa pagina di esempio.

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo	Firefox	IE	Bordo	Safari
91	87	11	88	TP

Mobile / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	14.0-14.4

Relazionato

• La proprietà float

Maggiori informazioni

• Capire Humble Clearfix
• Overflow: un vantaggio segreto
• Overflow su MDN
• Overflow su W3C
• Individuazione / riparazione del trabocco involontario del corpo