CSS: propiedad overflow-x

Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.

CSS: propiedad overflow-x

Este tutorial de CSS explica cómo usar una propiedad de CSS llamada desbordamiento-x Con sintaxis y ejemplos.

describir

La propiedad CSS overflow-x define qué hacer cuando el contenido se desborda del cuadro de contenido horizontalmente (es decir, izquierda y derecha), como mostrar el contenido fuera del cuadro de contenido, recortar el contenido, mostrar una barra de desplazamiento horizontal, etc.

sintaxis

La sintaxis de la propiedad CSS overflow-x es:

overflow-x: value;

parámetro o parámetro

valor

Comportamiento aplicado cuando el contenido desborda horizontalmente el cuadro de contenido. Puede ser uno de los siguientes:

valor describir
visible El contenido no se recorta, sino que se muestra fuera del cuadro de contenido (este es el comportamiento predeterminado)
div { desbordamiento-x: visible; }
oculto El contenido está recortado, el contenido de desbordamiento está oculto, no se muestra la barra de desplazamiento horizontal
div { desbordamiento-x: oculto; }
Desplazarse El contenido se recorta y se muestra una barra de desplazamiento horizontal
div { desbordamiento-x:desplazamiento; }
carro El navegador decide cómo manejar el contenido desbordado, esto puede variar de un navegador a otro (pero generalmente se mostrará una barra de desplazamiento horizontal según sea necesario)
div { desbordamiento-x:auto; }
heredar El elemento heredará el desbordamiento de su elemento principal
div { desbordamiento-x: heredar; }

notas

  • La propiedad overflow-x se aplica a bloques, bloques en línea y celdas de tabla.
  • La propiedad overflow-x no maneja el desbordamiento vertical. Para controlar el desbordamiento vertical, consulte las propiedades overflow y overflow-y.

Compatibilidad del navegador

La propiedad CSS overflow-x tiene soporte básico para los siguientes navegadores:

  • Aleación de cromo
  • Firefox (Geco)
  • Navegador de Internet (IE)
  • Ópera 9.5+
  • Safari (WebKit)

ejemplo

Discutiremos la propiedad overflow-x a continuación, explorando ejemplos de cómo usar esta propiedad en CSS.

visible

Veamos un ejemplo de configuración de overflow-x para que sea visible.

CSS se ve así:

div { background: lightyellow; border: 3px solid red; width: 80px; overflow-x: visible; }

HTML se ve así:

<div>
  <p>This is a paragraph written by prograrmaplus.com.</p>
</div>

El resultado se verá así:

En este ejemplo de overflow-x de CSS, configuramos overflow-x para que sea visible, lo que significa que cuando el contenido desborda el cuadro de contenido horizontalmente (es decir, de izquierda a derecha), no se recortará, pero se mostrará en el cuadro de contenido. fuera de.

oculto

Ahora, establezcamos overflow-x en oculto con el mismo ejemplo.

CSS se ve así:

div { background: lightyellow; border: 3px solid red; width: 80px; overflow-x: hidden; }

HTML se ve así:

<div>
  <p>This is a paragraph written by prograrmaplus.com.</p>
</div>

El resultado se verá así:

En este ejemplo de desbordamiento-x de CSS, configuramos la propiedad overflow-x en oculta, de modo que cuando el contenido desborda el cuadro de contenido horizontalmente (es decir, de izquierda a derecha), se oculta y no se muestra la barra de desplazamiento.

Desplazarse

Finalmente, tomemos un ejemplo y configuremos overflow-x para desplazarse y ver qué sucede.

CSS se ve así:

div { background: lightyellow; border: 3px solid red; width: 80px; overflow-x: scroll; }

HTML se ve así:

<div>
  <p>This is a paragraph written by prograrmaplus.com.</p>
</div>

El resultado se verá así:

En este ejemplo de overflow-x de CSS, configuramos la propiedad overflow-x para que se desplace, de modo que cuando el contenido desborda el cuadro de contenido horizontalmente (es decir, de izquierda a derecha), se recorta y se muestra una barra de desplazamiento horizontal.

(Visited 16 times, 1 visits today)