Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
overflow (excedente)
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
Sumario
La propiedad CSSoverflow especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque.
Usando la propiedadoverflow con un valor distinto avisible, valor por defecto, creará un nuevocontexto de formatos de bloques. Esto es técnicamente necesario debido a que si un elemento flotante interceptara con otros forzaría a reajustar el contenido alrededor de los elementos que se interceden. El reajuste sucedería luego de cada desplazamiento, y llevaría a un desplazamiento demasiado lento.
Nótese que, cambiando programáticamente el valor descrollTop al elemento HTML relevante, incluso cuandooverflow tenga el valorhidden un elemento podría necesitar ser desplazado.
| Valor inicial | visible |
|---|---|
| Applies to | Block-containers, flex containers, and grid containers |
| Heredable | no |
| Valor calculado | as each of the properties of the shorthand:
|
| Animation type | discrete |
Sintaxis
Sintáxis formal:overflow =
<'overflow-block'>{1,2}
<overflow-block> =
visible|
hidden|
clip|
scroll|
auto
overflow: visibleoverflow: hiddenoverflow: scrolloverflow: autooverflow: inherit
Valores
visibleValor por defecto. El contenido no es recortado, podría ser dibujado fuera de la caja contenedora.
hiddenEl contenido es recortado y no se muestran barras de posición.
scrollEl contenido es recortado y el navegador web usa las barras de desplazamiento, se haya recortado contenido o no. Esto previene cualquier problema con las barras de desplazamiento apareciendo o desapareciendo en un entorno dinámico. Puede que las impresoras impriman contenido excedente.
autoDepende del agente de usuario. Navegadores de escritorio como Firefox proveen barras de desplazamiento si hay contenido excedente.
Extensiones de Mozilla
-moz-scrollbars-noneObsoletoUsar
overflow:hidden.-moz-scrollbars-horizontalObsoletoEs preferible el uso de
overflow-xyoverflow-y.-moz-scrollbars-verticalObsoletoEs preferible el uso de
overflow-xyoverflow-y.- -moz-hidden-unscrollableNo estándar
Es usada principalmente para uso interno y por temas. Deshabilita el desplazamiento en elementos XML root y
<html>,<body>usando las flechas del teclado o la rueda del ratón.
Ejemplos
visible
p { width: 12em; border: dotted; overflow: visible; /* dibuja barras si es necesario */}<p > <code>visible</code> (por defecto)<br /> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>hidden
p { overflow: hidden; /* no se dibujan barras */}<p > <code>overflow: hidden</code><br /> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>scroll
p { overflow: scroll; /* se dibujan ambas barras */}<p > <code>overflow: scroll</code><br /> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>auto
p { overflow: auto; /* se dibujan barras según se necesite */}<p > <code>overflow: auto</code><br /> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>Especificaciones
| Specification |
|---|
| CSS Overflow Module Level 3 # propdef-overflow |
| Scalable Vector Graphics (SVG) 2 # OverflowAndClipProperties |
Compatibilidad con navegadores
Véase también
- Propiedades CSS relacionadas:
text-overflow,white-space,overflow-x,overflow-y,clip,display(