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.