Propiedad overflow-x de CSS

La propiedad overflow-x especifica si el contenido debe ocultarse, ser visible o desplazarse horizontalmente cuando el contenido desborda los bordes izquierdo y derecho del elemento. Esta propiedad es una de las propiedades de CSS3.

La propiedad overflow-x tiene cuatro valores principales: visible, scroll, auto y hidden.

INFO

Si la propiedad overflow-y es hidden, scroll o auto, y overflow-x es visible por defecto, se calculará como auto.

Valor inicial	visible
Se aplica a	Contenedores de bloque, contenedores flex y contenedores grid.
Heredable	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.overflowX = "visible";

Sintaxis

CSS overflow-x

css

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

Ejemplo de la propiedad overflow-x:

Ejemplo de código CSS overflow-x

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: scroll</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Try it Yourself »

Resultado

CSS overflow-x visible

Ejemplo de la propiedad overflow-x con el valor "visible":

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #cccccc;
        width: 40px;
        overflow-x: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: visible</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Try it Yourself »

Ejemplo de la propiedad overflow-x con el valor "hidden":

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: hidden</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Try it Yourself »

Ejemplo de la propiedad overflow-x con el valor "auto":

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: auto;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: auto</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Try it Yourself »

Ejemplo de la propiedad overflow-x con todos los valores:

Ejemplo de todos los valores de CSS overflow-x

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.scroll {
        background-color: #ccc;
        width: 50px;
        overflow-x: scroll;
      }
      div.hidden {
        background-color: #ccc;
        width: 50px;
        overflow-x: hidden;
      }
      div.auto {
        background-color: #ccc;
        width: 50px;
        overflow-x: auto;
      }
      div.visible {
        background-color: #ccc;
        width: 50px;
        overflow-x: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>overflow-x: scroll</h3>
    <div class="scroll">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: hidden</h3>
    <div class="hidden">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: auto</h3>
    <div class="auto">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: visible</h3>
    <div class="visible">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción	Probarlo
visible	El contenido no se recorta y se renderiza fuera de los bordes izquierdo y derecho del cuadro de relleno. Este es el valor predeterminado de esta propiedad.	Probarlo »
hidden	El contenido se recorta para ajustarse horizontalmente en el cuadro de relleno. No se añade ninguna barra de desplazamiento.	Probarlo »
scroll	El contenido se recorta para ajustarse horizontalmente en el cuadro de relleno. Se añade una barra de desplazamiento para ver el resto del contenido.	Probarlo »
auto	El contenido se recorta para ajustarse horizontalmente en el cuadro de relleno. Se añade una barra de desplazamiento solo si el contenido desborda.	Probarlo »
initial	Hace que la propiedad utilice su valor predeterminado.	Probarlo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Cuál de los siguientes NO es un valor para la propiedad overflow-x?

visiblehiddenstaticscroll

Propiedad overflow-x de CSS ​

Sintaxis ​

Ejemplo de la propiedad overflow-x: ​

Resultado ​

Ejemplo de la propiedad overflow-x con el valor "visible": ​

Ejemplo de la propiedad overflow-x con el valor "hidden": ​

Ejemplo de la propiedad overflow-x con el valor "auto": ​

Ejemplo de la propiedad overflow-x con todos los valores: ​

Valores ​

Práctica ​

Propiedad overflow-x de CSS

Sintaxis

Ejemplo de la propiedad overflow-x:

Resultado

Ejemplo de la propiedad overflow-x con el valor "visible":

Ejemplo de la propiedad overflow-x con el valor "hidden":

Ejemplo de la propiedad overflow-x con el valor "auto":

Ejemplo de la propiedad overflow-x con todos los valores:

Valores

Práctica