Características overflow-x en CSS

La propiedad overflow-x en CSS especifica si se recorta el contenido, se muestra una barra de desplazamiento o se muestra más contenido del elemento de bloque a la derecha o a la izquierda.

Funciones overflow-x css

Valor inicial	`visible`
Aplicado a	Elementos `block-level`y `inline-block`no reemplazados.
Heredable	No
Móvil	No
Valor calculado	Como se especificó.

/* el contenido no se recortará */ 
overflow-x :  visible ;
/* El contenido se recortará sin mostrar una barra de desplazamiento */ 
overflow-x :  hidden ;
/* El contenido se recortará con una barra de desplazamiento */ 
overflow-x :  scroll ;
/* Déjelo en manos del navegador */ 
overflow-x :  auto ;
/* valores globales */ 
overflow-x: inherit;
overflow-x: initial;
overflow-x: unset;

Ejemplos y aplicaciones en código

A continuación una demostración sencilla de este caso.

Código HTML:

<ul>
  <li><code>overflow-x:hidden</code>
    <div id="div1">
      ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
    </div>
  </li>

  <li><code>overflow-x:scroll</code>
    <div id="div2">
      1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27
    </div>
  </li>

  <li><code>overflow-x:visible</code>
    <div id="div3">
      ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
    </div>
  </li>

  <li><code>overflow-x:auto</code>
    <div id="div4">
      1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27
    </div>
  </li>
</ul>

Código CSS:

#div1, #div2, #div3, #div4 {
  border: 1px solid black;
  width:  250px;
  margin-bottom: 12px;
}
#div1 { overflow-x: hidden;}
#div2 { overflow-x: scroll;}
#div3 { overflow-x: visible;}
#div4 { overflow-x: auto;}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	3,5	5,0	9.5	3,0

Características generales

Esta propiedad acepta solo una de las palabras reservadas que se enumeran a continuación.

visible

El contenido no se recortará, pero se puede mostrar fuera del cuadro de contenido del elemento.

hidden

El contenido se recortará y el navegador no mostrará una barra de desplazamiento.

scroll

El contenido se recortará y los navegadores mostrarán barras de desplazamiento tanto si el contenido se ha recortado como si no, esto evita el problema de que la barra de desplazamiento aparezca y desaparezca en las páginas dinámicas. Tenga en cuenta que las impresoras pueden imprimir contenido más allá del cuadro de contenido.

auto

Deje la elección al software que procesa el documento, por ejemplo, los navegadores de computadora mostrará una barra de desplazamiento si el contenido excede el cuadro de contenido.

Estructura overflow-x css

overflow-x: visible | hidden | scroll | auto;

Consulte también

La propiedad overflow de la página y la página subpropiedades que este conjunto de propiedades son: overflow-y.
Página de propiedades position que describe cómo se debe colocar el elemento en el documento.
La página de cada una de las propiedades width, height que se encarga de configurar las dimensiones del elemento.