Diseño de disposición - desbordamiento

CSS overflow property controls how content that is too large to fit in the area is handled.

Este texto es muy largo y el contenedor tiene una altura de solo 100 píxeles. Por lo tanto, se añadió una barra de desplazamiento para ayudar a los lectores a desplazarse por el contenido. Este texto es muy largo y el contenedor tiene una altura de solo 100 píxeles. Por lo tanto, se añadió una barra de desplazamiento para ayudar a los lectores a desplazarse por el contenido. Este texto es muy largo y el contenedor tiene una altura de solo 100 píxeles. Por lo tanto, se añadió una barra de desplazamiento para ayudar a los lectores a desplazarse por el contenido. Este texto es muy largo y el contenedor tiene una altura de solo 100 píxeles. Por lo tanto, se añadió una barra de desplazamiento para ayudar a los lectores a desplazarse por el contenido. Este texto es muy largo y el contenedor tiene una altura de solo 100 píxeles. Por lo tanto, se añadió una barra de desplazamiento para ayudar a los lectores a desplazarse por el contenido. Este texto es muy largo y el contenedor tiene una altura de solo 100 píxeles. Por lo tanto, se añadió una barra de desplazamiento para ayudar a los lectores a desplazarse por el contenido. Este texto es muy largo y el contenedor tiene una altura de solo 100 píxeles. Por lo tanto, se añadió una barra de desplazamiento para ayudar a los lectores a desplazarse por el contenido. Este texto es muy largo y el contenedor tiene una altura de solo 100 píxeles. Por lo tanto, se añadió una barra de desplazamiento para ayudar a los lectores a desplazarse por el contenido. Este texto es muy largo y el contenedor tiene una altura de solo 100 píxeles. Por lo tanto, se añadió una barra de desplazamiento para ayudar a los lectores a desplazarse por el contenido. Este texto es muy largo y el contenedor tiene una altura de solo 100 píxeles. Por lo tanto, se añadió una barra de desplazamiento para ayudar a los lectores a desplazarse por el contenido. Este texto es muy largo y el contenedor tiene una altura de solo 100 píxeles. Por lo tanto, se añadió una barra de desplazamiento para ayudar a los lectores a desplazarse por el contenido.

Prueba personalmente

CSS Overflow

overflow La propiedad especifica si se recortará el contenido o se añadirá una barra de desplazamiento cuando el contenido del elemento es demasiado grande para caber en el área especificada.

overflow La propiedad puede establecer los siguientes valores:

  • visible - Por defecto. El desbordamiento no se recortará. El contenido se renderizará fuera del cuadro del elemento
  • hidden - El desbordamiento se recortará y el contenido restante no será visible
  • scroll - El desbordamiento se recortará y se añadirá una barra de desplazamiento para ver el contenido restante
  • auto - Con scroll Similar, pero solo se añade una barra de desplazamiento cuando sea necesario

Nota:overflow La propiedad solo se aplica a los elementos de bloque con altura especificada.

Nota:En OS X Lion (en Mac), la barra de desplazamiento está oculta por defecto y solo se muestra al usarla (incluso si se ha configurado "overflow:scroll").

overflow: visible

Por defecto, el desbordamiento es visible (visible) lo que significa que no se recortará, sino que se renderizará fuera del cuadro del elemento:

Cuando desee controlar mejor el diseño, puede usar la propiedad overflow. La propiedad overflow especifica qué sucederá si el contenido se desborda del cuadro del elemento.

Ejemplo

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

Prueba personalmente

overflow: hidden

Si se utiliza hidden El valor, el desbordamiento se recortará y el resto del contenido se ocultará:

Cuando desee controlar mejor el diseño, puede usar la propiedad overflow. La propiedad overflow especifica qué sucederá si el contenido se desborda del cuadro del elemento.

Ejemplo

div {
  overflow: hidden;
}

Prueba personalmente

overflow: scroll

Si se establece el valor en scrollEl desbordamiento se recortará y se añadirá una barra de desplazamiento para desplazarse dentro del cuadro. Tenga en cuenta que esto añadirá una barra de desplazamiento en ambas direcciones (incluso si no es necesario):

Cuando desee controlar mejor el diseño, puede usar la propiedad overflow. La propiedad overflow especifica qué sucederá si el contenido se desborda del cuadro del elemento.

Ejemplo

div {
  overflow: scroll;
}

Prueba personalmente

overflow: auto

auto El valor es similar a scrollpero solo se añade una barra de desplazamiento cuando sea necesario:

Cuando desee controlar mejor el diseño, puede usar la propiedad overflow. La propiedad overflow especifica qué sucederá si el contenido se desborda del cuadro del elemento.

Ejemplo

div {
  overflow: auto;
}

Prueba personalmente

overflow-x y overflow-y

overflow-x Y overflow-y La propiedad especifica si se cambia el desbordamiento del contenido solo en horizontal o vertical (o ambos):

  • overflow-x Especifica cómo manejar los bordes izquierdo / derecho del contenido.
  • overflow-y Especifica cómo manejar los bordes superior / inferior del contenido.
Cuando desee controlar mejor el diseño, puede usar la propiedad overflow. La propiedad overflow especifica qué sucederá si el contenido se desborda del cuadro del elemento.

Ejemplo

div {
  overflow-x: hidden; /* Oculta la barra de desplazamiento horizontal */
  overflow-y: scroll; /* Añade la barra de desplazamiento vertical */
}

Prueba personalmente

Todas las propiedades de overflow CSS

Atributo Descripción
overflow Especifica qué sucederá si el contenido se desborda el cuadro del elemento.
overflow-x Especifica cómo manejar los bordes izquierdo/derecho del contenido cuando se desborda el área de contenido del elemento.
overflow-y Especifica cómo manejar los bordes superior/inferior del contenido cuando se desborda el área de contenido del elemento.