Característica del Overflow en CSS

por
CSS Overflow

Tabla de contenidos

La propiedad overflow en el CSS especifica si recortar el contenido, mostrar una barra de desplazamiento o mostrar más contenido del elemento de bloque cuando excede las dimensiones del contenedor de bloque en el que se encuentra.

Funciones del overflow

Valor inicialvisible
Aplicado aElementos el block-level y inline-block no reemplazados.
HeredableNo
MóvilNo
Valor calculadoComo se especificó.
/* El contenido no se recortará */ 
overflow :  visible ;

/* El contenido se recortará sin mostrar una barra de desplazamiento */ 
overflow :  hidden ;

/* El contenido se recortará con una barra de desplazamiento */ 
overflow :  scroll ;

/* Déjelo en manos del navegador */ 
overflow :  auto ;

/* valores globales */ 
overflow :  inherit ; 
overflow :  initial ; 
overflow :  unset ;

Ejemplos del overflow en CSS

A continuación, se muestra un ejemplo de un valor predeterminado visible que hace que se muestre más contenido a los lados del elemento:

< p >
En Windows 11 nos llega una renovada Microsoft Store: se renovó su diseño y se reorganizó el contenido y aplicaciones 
disponibles. Entre los cambios más interesantes en esta versión es que Microsoft permitirá que las aplicaciones de 
terceros usen sus propios sistemas de pago sin recibir comisiones. 
</ p >

Código CSS:

p  { 
  width :  15 em ; 
  height :  5 em ; 
  padding :  0.25 em ; 
  border :  dashed thin  #060 ; 
  overflow :  visible ; 
}

Ejemplo del valor hidden que recortará el exceso de contenido:

p  { 
  width :  15 em ; 
  height :  5 em ; 
  padding :  0.25 em ; 
  border :  dashed thin  #060 ; 
  overflow :  hidden ; 
}

Demostración de un valor scroll que siempre muestra barras de desplazamiento:

p  { 
  width :  15 em ; 
  height :  5 em ; 
  padding :  0.25 em ; 
  border :  dashed thin  #060 ; 
  overflow :  scroll ; 
}

Ejemplo de un valor auto que hace que aparezcan barras de desplazamiento cuando las necesita:

p  { 
  width :  15 em ; 
  height :  5 em ; 
  padding :  0.25 em ; 
  border :  dashed thin  #060 ; 
  overflow :  auto; 
}

Soporte en los navegadores del overflow

CaracterísticaChromeFirefoxInternet ExplorerÓperaSafari
Soporte básico 1.0 1.0 4.0 7.0 1.0

Funciones generales del overflow en CSS

Esta propiedad acepta solo una de las palabras reservadas que se enumeran a continuación.

visible

El contenido no se recortará, pero se puede mostrar fuera del cuadro de contenido del elemento.

hidden

El contenido se recortará y el navegador no mostrará barras de desplazamiento.

scroll

El contenido se recortará y los navegadores mostrarán barras de desplazamiento, ya sea que el contenido se haya recortado o no, esto evita el problema de que la barra de desplazamiento aparezca y desaparezca en las páginas dinámicas. Tenga en cuenta que las impresoras pueden imprimir contenido más allá del cuadro de contenido.

auto

Déjelo en manos del software que procesa el documento. Por ejemplo, los navegadores de computadora mostrarán una barra de desplazamiento si el contenido excede el cuadro de contenido.

Estructura fiable

overflow :  visible  |  hidden  |  scroll  |  auto ;