CSS: propiedad de desbordamiento

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.

(Visited 16 times, 1 visits today)