Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Los resultados de tu búsqueda

    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 nesecario 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 non-replaced block-level elements and non-replaced inline-block elements
    • Heredable no
    • Media visual
    • Valor calculado as specified
    • Animatable no
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Sintáxis

    Sintáxis formal: visible | hidden | scroll | auto
    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, sea 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 y overflow-y.
    -moz-scrollbars-vertical
    Es preferible el uso de overflow-x y overflow-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 */ }
    

    overflow: hidden
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

    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
    The definition of 'overflow' in that specification.
    Working Draft Sin cambios.
    CSS Level 2 (Revision 1)
    The definition of 'overflow' in that specification.
    Recommendation  

    Compatibilidad en navegadores

    Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Soporte básico 1.0 1.0 (1.7 or earlier) 4.0 7.0 1.0 (85)
    Característica Android Firefox Móvil (Gecko) IE Phone Opera Móvil Safari Móvil
    Soporte básico ? 1.0 (1) ? ? ?

    Notas sobe Firefox (Gecko)

    En Firefox 3.6 (Gecko 1.9.2), la propiedad overflow es aplicada incorrectamente en elementos que son parte de una tabla (<thead> , <tbody> , <tfoot>). Este comportamiento es corregido en las versiones recientes.

    Notas sobre Internet Explorer

    En Internet Explorer de la versión 4 a 6 un elemento con overflow:visible es expandido para abarcar su contenedor. height/width se comportan como min-height/min-width.

    Véase también

    Etiquetas y colaboradores del documento

    Contributors to this page: _0x, Sheppy, teoli
    Última actualización por: Sheppy,