Desbordamiento CSS

El desbordamiento CSS controla que sucede con el contenido que es demasiado grande para caber en el área.

La propiedad overflow

La propiedad overflow especifica si recortar el contenido o agregar una barra de desplazamiento cuando el contenido de un elemento es demasiado grande para caber en un área especificada.

La propiedad overflow acepta los siguientes valores:

• visible : Es el valor predeterminado. El desbordamiento no es cortado y se renderiza fuera del cuadro de la etiqueta.
• hidden : El desbordamiento es cortado y el resto del contenido no es visible.
• scroll : El desbordamiento es cortado y es agregada una barra de desplazamiento para mostrar el resto del contenido.
• auto : Si el desbordamiento del contenido es cortado se agrega una barra de desplazamiento para mostrar el resto del contenido.

Nota: La propiedad overflow solo funciona para etiquetas con nivel de bloque con la propiedad height especificada.

El valor visible

El valor visible es el predeterminado para las etiquetas HTML con nivel de bloque y el desbordamiento es visible, es decir, si el contenido es mayor que el área de la etiqueta no es cortado y es visible fuera de la caja de la etiqueta.

div {
  width: 200px;
  height: “00px;
  background-color: #eee;
  overflow: visible;
}

El valor hidden

Con el valor hidden el desbordamiento es cortado, es decir, si el contenido es mayor que área de etiqueta HTML con nivel de bloque, este contenido es cortado y el resto no es visible.

div {
  overflow: hidden;
}

El valor scroll

Con el valor scroll el desbordamiento es cortado pero con barras de desplazamiento, tanto horizontal como verticalmente.

div {
  overflow: scroll;
}

El valor auto

El valor auto es similar al valor scroll, a diferencia que solo mostrará las barras de desplazamiento si existe el desbordamiento, es decir, solo cuando el contenido sea mayor que el área de la etiqueta se mostrarán las barras de desplazamiento, si no es así, no no se mostrarán las barras dado que no es necesario mostrar más contenido.

div {
  overflow: auto;
}

La propiedad overflow-x

La propiedad overflow-x especifica el comportamiento del desbordamiento pero solo horizontalmente. Acepta los mismos valores que overflow.

div {
  overflow-x: hidden;
}

La propiedad overflow-y

La propiedad overflow-y especifica el comportamiento del desbordamiento pero solo verticalmente. Acepta los mismos valores que overflow.

div {
  overflow-y: scroll;
}

Las propiedades de desbordamiento

Propiedad	Descripción
overflow	Especifica el comportamiento del desbordamiento de una etiqueta HTML con nivel de bloque si el contenido es mayor que el área disponible.
overflow-x	Especifica el comportamiento del desbordamiento de una etiqueta HTML con nivel de bloque si el contenido es mayor que el área horizontal disponible.
overflow-y	Especifica el comportamiento del desbordamiento de una etiqueta HTML con nivel de bloque si el contenido es mayor que el área vertical disponible.