Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Gestión del Desbordamiento de Contenido en CSS | Dominio del Posicionamiento en CSS
Técnicas Avanzadas de CSS

bookGestión del Desbordamiento de Contenido en CSS

Consideremos cómo podemos controlar el desbordamiento del contenido con la ayuda de una propiedad. A veces sucede que tenemos un width y height fijos para el elemento. Sin embargo, el contenido interno es mucho mayor que el espacio disponible. La propiedad overflow controla el comportamiento del contenido de un elemento cuando excede los valores de height o width establecidos explícitamente para el elemento.

overflow: visible | scroll | hidden | auto
  • visible - es el valor predeterminado. El contenido sobrepasa los bordes del elemento y permanece visible;
  • scroll - El contenido sobrepasa los bordes del elemento, y aparece una barra de desplazamiento que permite al usuario desplazarse tanto vertical como horizontalmente;
  • hidden - El contenido que sobrepasa el tamaño de los bordes del elemento se corta y no es visible;
  • auto - funciona igual que scroll. Sin embargo, las barras de desplazamiento solo aparecen cuando el contenido sobrepasa los bordes del elemento.

Nota

El contenido desbordado no afecta la geometría de los demás elementos.

visible

Si la propiedad overflow no está establecida, su valor predeterminado es visible. Esto significa que el contenido se mostrará fuera de los bordes del elemento. En el ejemplo, los bordes de la caja están resaltados en darkblue, y la caja tiene propiedades fijas de width y height.

index.html

index.html

index.css

index.css

copy

scroll

Podemos visualizar todo el contenido del elemento utilizando una barra de desplazamiento. Observa el siguiente ejemplo:

index.html

index.html

index.css

index.css

copy

hidden

Todo el contenido desbordado estará oculto y el usuario nunca lo verá. Generalmente, es útil solo cuando se necesitan desarrollar algunos efectos decorativos.

index.html

index.html

index.css

index.css

copy
question mark

¿Qué hace la propiedad overflow?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 12

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 2.04

bookGestión del Desbordamiento de Contenido en CSS

Desliza para mostrar el menú

Consideremos cómo podemos controlar el desbordamiento del contenido con la ayuda de una propiedad. A veces sucede que tenemos un width y height fijos para el elemento. Sin embargo, el contenido interno es mucho mayor que el espacio disponible. La propiedad overflow controla el comportamiento del contenido de un elemento cuando excede los valores de height o width establecidos explícitamente para el elemento.

overflow: visible | scroll | hidden | auto
  • visible - es el valor predeterminado. El contenido sobrepasa los bordes del elemento y permanece visible;
  • scroll - El contenido sobrepasa los bordes del elemento, y aparece una barra de desplazamiento que permite al usuario desplazarse tanto vertical como horizontalmente;
  • hidden - El contenido que sobrepasa el tamaño de los bordes del elemento se corta y no es visible;
  • auto - funciona igual que scroll. Sin embargo, las barras de desplazamiento solo aparecen cuando el contenido sobrepasa los bordes del elemento.

Nota

El contenido desbordado no afecta la geometría de los demás elementos.

visible

Si la propiedad overflow no está establecida, su valor predeterminado es visible. Esto significa que el contenido se mostrará fuera de los bordes del elemento. En el ejemplo, los bordes de la caja están resaltados en darkblue, y la caja tiene propiedades fijas de width y height.

index.html

index.html

index.css

index.css

copy

scroll

Podemos visualizar todo el contenido del elemento utilizando una barra de desplazamiento. Observa el siguiente ejemplo:

index.html

index.html

index.css

index.css

copy

hidden

Todo el contenido desbordado estará oculto y el usuario nunca lo verá. Generalmente, es útil solo cuando se necesitan desarrollar algunos efectos decorativos.

index.html

index.html

index.css

index.css

copy
question mark

¿Qué hace la propiedad overflow?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 12
some-alt