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 de desbordamiento
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada Desbordamiento Con sintaxis y ejemplos.
describir
La propiedad de desbordamiento de CSS define qué hacer cuando el contenido desborda el cuadro de contenido, como mostrar contenido fuera del cuadro de contenido, recortar contenido o mostrar barras de desplazamiento.
sintaxis
La sintaxis de la propiedad CSS de desbordamiento es:
overflow: value;
parámetro o parámetro
valor
El comportamiento a aplicar cuando el contenido desborda 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: visible;} |
oculto | El contenido está recortado, el contenido desbordado está oculto, las barras de desplazamiento no se muestran div {desbordamiento: oculto;} |
Desplazarse | El contenido se recorta y se muestran las barras de desplazamiento necesarias div {desbordamiento: desplazamiento;} |
carro | El navegador decide cómo manejar el contenido desbordado, que puede variar de un navegador a otro (pero generalmente se muestran barras de desplazamiento según sea necesario) div {desbordamiento: automático;} |
heredar | El elemento heredará el desbordamiento de su elemento principal div { desbordamiento: heredar; } |
notas
- La propiedad de desbordamiento se aplica a bloques, bloques en línea y celdas de tabla.
Compatibilidad del navegador
La propiedad de desbordamiento de CSS tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- Firefox (Geco)
- Navegador de Internet (IE)
- ópera
- Safari (WebKit)
ejemplo
Discutiremos la propiedad de desbordamiento a continuación, explorando ejemplos de cómo usar esta propiedad en CSS.
visible
Veamos un ejemplo de configurar el desbordamiento como visible.
CSS se ve así:
div { background: lightyellow; border: 3px solid red; padding: 5px; height: 100px; width: 150px; overflow: visible; }
HTML se ve así:
<div>
<p>This is the first paragraph written by prograrmaplus.com.</p>
<p>This is the second paragraph written by prograrmaplus.com.</p>
</div>
El resultado se verá así:
En este ejemplo de desbordamiento de CSS, configuramos el desbordamiento para que sea visible, lo que significa que cuando el contenido desborda el cuadro de contenido, no se recortará, sino que se mostrará fuera del cuadro de contenido.
oculto
Ahora, establezcamos el desbordamiento en oculto con el mismo ejemplo.
CSS se ve así:
div { background: lightyellow; border: 3px solid red; padding: 5px; height: 100px; width: 150px; overflow: hidden; }
HTML se ve así:
<div>
<p>This is the first paragraph written by prograrmaplus.com.</p>
<p>This is the second paragraph written by prograrmaplus.com.</p>
</div>
El resultado se verá así:
En este ejemplo de desbordamiento de CSS, configuramos la propiedad de desbordamiento en oculta, de modo que cuando el contenido desborda el cuadro de contenido, se oculta y no se muestra la barra de desplazamiento.
Desplazarse
Finalmente, tomemos nuestro ejemplo y configuremos el desbordamiento para desplazarse y ver qué sucede.
CSS se ve así:
div { background: lightyellow; border: 3px solid red; padding: 5px; height: 100px; width: 150px; overflow: scroll; }
HTML se ve así:
<div>
<p>This is the first paragraph written by prograrmaplus.com.</p>
<p>This is the second paragraph written by prograrmaplus.com.</p>
</div>
El resultado se verá así:
En este ejemplo de desbordamiento de CSS, configuramos la propiedad de desbordamiento para desplazarse, de modo que cuando el contenido desborda el cuadro de contenido, se recorta y se muestran las barras de desplazamiento necesarias. Entonces, en este ejemplo, la barra de desplazamiento vertical aparece porque el contenido es demasiado alto para el cuadro de contenido.