Propiedad overflow

La propiedad overflow le indica al navegador, quÉ hacer con el contenido (texto, imágenes, otros bloques) que se desborda de los lÍmites del bloque (más allÁ de su ancho o altura). El navegador puede ocultar la parte que se desborda, agregar barras de desplazamiento o no hacer nada (dejarlo como estÁ - desbordado de los lÍmites).

Sintaxis

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

Valores

Valor	Descripción
`hidden`	Oculta el contenido que se desborda de los lÍmites del bloque.
`scroll`	Agrega barras de desplazamiento, siempre, incluso si nada se desborda (en este caso estarÁn inactivas).
`auto`	Agrega barras de desplazamiento cuando es necesario: si el contenido no cabe - aparecerÁn, si todo cabe - no estarÁn.
`visible`	No oculta el contenido que se desborda de los lÍmites del bloque.

Valor por defecto: visible.

Ejemplo . Valor visible

En este ejemplo, una palabra muy larga no cabrÁ en el contenedor y se desbordarÁ de sus lÍmites. No hay recorte:

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

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

Ejemplo . Valor visible

Y ahora estÁ limitado no solo el ancho, sino tambiÉn la altura (el texto se desbordarÁ del bloque tambiÉn en altura):

<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;
}

Ejemplo . Valor hidden

Ahora todo lo que se desborda de los lÍmites del contenedor simplemente se recortarÁ (tambiÉn en altura). Presta atenciÓn al hecho de que el recorte en altura ocurre solo cuando se establece explÍcitamente. En caso contrario, el texto expande el contenedor en altura - y no habrÁ ningÚn recorte:

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

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

Ejemplo . Valor scroll

Con el valor scroll las barras de desplazamiento estarÁn siempre, incluso si nada se desborda (en este caso estarÁn inactivas). Ahora el texto no se desborda ni en ancho ni en altura, pero las barras de desplazamiento estÁn allÍ (inactivas):

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

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

Ejemplo . Valor auto

Con el valor auto las barras de desplazamiento se agregan solo si el contenido se desborda del contenedor. Ahora no estÁn, ya que todo cabe:

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

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

Ejemplo . Valor auto

Y ahora limitemos el ancho - aparecerÁ la barra de desplazamiento horizontal:

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

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

Véase también

propiedad word-break,
que divide las letras de una palabra larga en una nueva lÍnea
propiedad overflow-wrap,
que divide las letras de una palabra larga en una nueva lÍnea
propiedad overflow-x,
que recorta las partes que se desbordan horizontalmente
propiedad overflow-y,
que recorta las partes que se desbordan verticalmente