overflow (excedente)
Sumario
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.
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:[ (en-US) visible | (en-US) hidden | (en-US) clip | (en-US) scroll | (en-US) auto ] (en-US){ (en-US)1,2} (en-US)
overflow: visible overflow: hidden overflow: scroll overflow: auto overflow: inherit
Valores
visible
- Valor por defecto. El contenido no es recortado, podría ser dibujado fuera de la caja contenedora.
hidden
- El contenido es recortado y no se muestran barras de posición.
scroll
- El 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.
auto
- Depende del agente de usuario. Navegadores de escritorio como Firefox proveen barras de desplazamiento si hay contenido excedente.
Extensiones de Mozilla
-moz-scrollbars-none
- Usar
overflow:hidden
. -moz-scrollbars-horizontal
- Es preferible el uso de
overflow-x
(en-US) yoverflow-y
. -moz-scrollbars-vertical
- Es preferible el uso de
overflow-x
(en-US) yoverflow-y
. - -moz-hidden-unscrollable
- 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
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.
Especificaciones
Especificación | Estado | Comentario |
---|---|---|
CSS Basic Box Model La definición de 'overflow' en esta especificación. |
Candidate Recommendation | Sin cambios. |
CSS Level 2 (Revision 1) La definición de 'overflow' en esta especificación. |
Recommendation |
Compatibilidad en navegadores
BCD tables only load in the browser
Véase también
- Propiedades CSS relacionadas:
text-overflow
,white-space
,overflow-x
(en-US),overflow-y
,clip
,display
(