los overflow-xCSS La propiedad establece lo que se muestra cuando el contenido desborda los bordes izquierdo y derecho de un elemento de nivel de bloque. Esto puede ser nada, una barra de desplazamiento o el contenido de desbordamiento.

Sintaxis

/* Keyword values */overflow-x: visible;overflow-x: hidden;overflow-x: clip;overflow-x: scroll;overflow-x: auto;/* Global values */overflow-x: inherit;overflow-x: initial;overflow-x: unset;

los overflow-x La propiedad se especifica como una sola palabra clave elegida de la lista de valores a continuación.

Valores

visible
El contenido no se recorta y se puede representar fuera de los bordes izquierdo y derecho del cuadro de relleno. Si overflow-y es hidden, scroll o auto y esta propiedad es visible, calculará implícitamente para auto.
hidden
El contenido se recorta si es necesario para que quepa horizontalmente en el cuadro de relleno. No se proporcionan barras de desplazamiento.
clip Esta es una API experimental que no debe usarse en código de producción.
Como por hidden, el contenido se recorta en el cuadro de relleno del elemento. La diferencia entre clip y hidden es que el clip La palabra clave también prohíbe todo el desplazamiento, incluido el desplazamiento programático. El cuadro no es un contenedor de desplazamiento y no inicia un nuevo contexto de formato. Si desea iniciar un nuevo contexto de formato, puede utilizar display: flow-root para hacerlo.
scroll
El contenido se recorta si es necesario para que quepa horizontalmente en el cuadro de relleno. Los navegadores muestran barras de desplazamiento tanto si el contenido está recortado como si no. (Esto evita que las barras de desplazamiento aparezcan o desaparezcan cuando cambia el contenido). Es posible que las impresoras sigan imprimiendo contenido desbordado.
auto
Depende del agente de usuario. Si el contenido cabe dentro del cuadro de relleno, tiene el mismo aspecto que visible, pero aún establece un nuevo contexto de formato de bloque. Los navegadores de escritorio proporcionan barras de desplazamiento si el contenido se desborda.

Definicion formal

Valor inicial visible
Se aplica a Contenedores de bloque, contenedores flexibles y contenedores de rejilla
Heredado no
Valor calculado como se especifica, excepto con visible/clip computación para auto/hidden respectivamente si uno de overflow-x o overflow-y Es ninguno visible ni clip
Tipo de animación discreto

Sintaxis formal

visible | hidden | clip | scroll | auto

Ejemplos de

HTML

<ul><li><code>overflow-x:hiddencode> — hides the text outside the box
    <divid="div1">
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    div>li><li><code>overflow-x:scrollcode> — always adds a scrollbar
    <divid="div2">
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    div>li><li><code>overflow-x:visiblecode> — displays the text outside the box if needed
    <divid="div3">
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    div>li><li><code>overflow-x:autocode> — on most browsers, equivalent to <code>scrollcode><divid="div4">
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    div>li>ul>

CSS

#div1, #div2, #div3, #div4border: 1px solid black;width:  250px;margin-bottom: 12px;#div1overflow-x: hidden;#div2overflow-x: scroll;#div3overflow-x: visible;#div4overflow-x: auto;

Resultado

Especificaciones

Especificación Estado Comentario
Módulo de desbordamiento CSS nivel 3
La definición de ‘overflow-x’ en esa especificación.		 Borrador de trabajo

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
overflow-x 1 12 3,5 58 9.5 3 1 18 4 14 1 1.0
clip No No 813.5-81 No No No No No 814-81 No No No

Ver también

  • Propiedades CSS relacionadas: text-overflow, white-space, overflow, overflow-y, clip, display