--- title: overflow (excedente) slug: Web/CSS/overflow translation_of: Web/CSS/overflow ---
La propiedad CSS overflow
especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque.
Usando la propiedad overflow
con un valor distinto a visible
, valor por defecto, creará un nuevo contexto 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 de scrollTop
al elemento HTML relevante, incluso cuando overflow
tenga el valor hidden
un elemento podría necesitar ser desplazado.
{{cssinfo}}
Sintáxis formal: {{csssyntax("overflow")}}
overflow: visible overflow: hidden overflow: scroll overflow: auto overflow: inherit
visible
hidden
scroll
auto
-moz-scrollbars-none
{{ obsolete_inline() }}overflow:hidden
.-moz-scrollbars-horizontal
{{ Deprecated_inline() }}-moz-scrollbars-vertical
{{ Deprecated_inline() }}<html>
, <body>
usando las flechas del teclado o la rueda del ratón.p { width: 12em; border: dotted; overflow: visible; /* dibuja barras si es necesario */ }
visible
(por defecto)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
p { overflow: hidden; /* no se dibujan barras */ }
p { overflow: scroll; /* se dibujan ambas barras */ }
overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
p { overflow: auto; /* se dibujan barras según se necesite */ }
overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Especificación | Estado | Comentario |
---|---|---|
{{ SpecName('CSS3 Box', '#overflow1', 'overflow') }} | {{ Spec2('CSS3 Box') }} | Sin cambios. |
{{ SpecName('CSS2.1', 'visufx.html#overflow', 'overflow') }} | {{ Spec2('CSS2.1') }} |
{{Compat("css.properties.overflow")}}