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
Valores
visible
-
Valor por defecto. El contenido no es recortado, podría ser dibujado fuera de la caja contenedora.
-
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
Obsoleto-
Usar
overflow:hidden
. -moz-scrollbars-horizontal
Obsoleto-
Es preferible el uso de
overflow-x
yoverflow-y
. -moz-scrollbars-vertical
Obsoleto-
Es preferible el uso de
overflow-x
yoverflow-y
. -
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 */
}
must be provided
hidden
p {
overflow: hidden; /* no se dibujan barras */
}
must be provided
scroll
p {
overflow: scroll; /* se dibujan ambas barras */
}
must be provided
auto
p {
overflow: auto; /* se dibujan barras según se necesite */
}
must be provided
Especificaciones
Specification |
---|
CSS Overflow Module Level 3 # propdef-overflow |
Compatibilidad con navegadores
BCD tables only load in the browser
Véase también
- Propiedades CSS relacionadas:
text-overflow
,white-space
,overflow-x
,overflow-y
,clip
,display
(