Proprietà overflow

La proprietà overflow indica al browser come comportarsi con i contenuti (testo, immagini, altri blocchi) che fuoriescono dai bordi del blocco (dalla sua larghezza o altezza). Il browser può nascondere la parte che fuoriesce, aggiungere barre di scorrimento o non fare nulla (lasciare così com'è - fuori dai bordi).

Sintassi

selettore {
	overflow: hidden | scroll | auto | visible;
}

Valori

Valore	Descrizione
`hidden`	Nasconde il contenuto che fuoriesce dai bordi del blocco.
`scroll`	Aggiunge le barre di scorrimento, sempre, anche se nulla fuoriesce (in questo caso saranno inattive).
`auto`	Aggiunge le barre di scorrimento quando necessario: se il contenuto non entra - appariranno, se tutto entra - non ci saranno.
`visible`	Non nasconde il contenuto che fuoriesce dai bordi del blocco.

Valore predefinito: visible.

Esempio . Valore visible

In questo esempio una parola molto lunga non entrerà nel contenitore e fuoriuscirà dai suoi bordi. Non avviene alcun taglio:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: visible;
	border: 1px solid red;
	width: 200px;
}

Esempio . Valore visible

Ora non è limitata solo la larghezza, ma anche l'altezza (il testo fuoriuscirà dal blocco anche in altezza):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	height: 40px;
	overflow: visible;
	border: 1px solid red;
	margin-bottom: 20px;
}

Esempio . Valore hidden

Ora tutto ciò che fuoriesce dai bordi del contenitore viene semplicemente tagliato (anche in altezza). Fate attenzione al fatto che il taglio in altezza avviene solo quando essa è impostata esplicitamente. In caso contrario il testo espande il contenitore in altezza - e non ci sarà alcun taglio:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: hidden;
	width: 200px;
	height: 40px;
	border: 1px solid red;
}

Esempio . Valore scroll

Con il valore scroll le barre di scorrimento ci saranno sempre, anche se nulla fuoriesce (in questo caso saranno inattive). Ora il testo non fuoriesce né in larghezza, né in altezza, ma le barre di scorrimento ci sono comunque (inattive):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: scroll;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Esempio . Valore auto

Con il valore auto le barre di scorrimento vengono aggiunte solo se il contenuto fuoriesce dal contenitore. Ora non ci sono, poiché tutto entra:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: auto;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Esempio . Valore auto

Ora limitiamo la larghezza - apparirà la barra di scorrimento orizzontale:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: auto;
	height: 100px;
	border: 1px solid red;
}

Vedi anche

la proprietà word-break,
che spezza le lettere di una parola lunga andando a capo
la proprietà overflow-wrap,
che spezza le lettere di una parola lunga andando a capo
la proprietà overflow-x,
che taglia le parti che fuoriescono in orizzontale
la proprietà overflow-y,
che taglia le parti che fuoriescono in verticale