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

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

Valores

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:

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

css#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):

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

css#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:

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

css#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):

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

css#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:

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

css#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:

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

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

Результат:

Véase también