Gestió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 quescroll
. 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.css
scroll
Podemos visualizar todo el contenido del elemento utilizando una barra de desplazamiento. Observa el siguiente ejemplo:
index.html
index.css
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.css
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 2.04
Gestió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 quescroll
. 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.css
scroll
Podemos visualizar todo el contenido del elemento utilizando una barra de desplazamiento. Observa el siguiente ejemplo:
index.html
index.css
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.css
¡Gracias por tus comentarios!