
Tabla de contenidos
- Funciones del overflow
- Ejemplos del overflow en CSS
- Soporte en los navegadores del overflow
- Funciones generales del overflow en CSS
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 inicial | visible |
---|---|
Aplicado a | Elementos el block-level y inline-block no reemplazados. |
Heredable | No |
Móvil | No |
Valor calculado | Como 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ística | Chrome | Firefox | Internet Explorer | Ópera | Safari |
---|---|---|---|---|---|
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 ;
- Múltiples Constantes en TypeScript
- Estructura de Datos las Colas
- Estructura de Datos las Pilas (Stack)
- Widget Drawer en Flutter
- Clase Scaffold en Flutter
- Estructura del lenguaje Python
- Iteradores y generadores en TypeScript
- Símbolo en TypeScript (Symbol)
- Tipos Avanzados en TypeScript
- Tipos de Compatibilidad en TypeScript
- Inferir Tipos en TypeScript
- Tipos Generalizados (Generics) en TypeScript
- Tipos Básicos de Datos en TypeScript
- Interfaces en TypeScript
- Declaración de Variables en TypeScript
- Funciones en TypeScript
- Categorías en TypeScript
- Introducción a TypeScript
- Clase MaterialApp en Flutter
- Clase Container en Flutter
- ¿Qué son los Widgets en Flutter?
- Introducción a la Arquitectura de Aplicaciones con Flutter
- Lista Doblemente Enlazada
- Listas Vinculadas en Estructura de Datos
- Introducción a las Matrices(Arrays)
- Estructuras de Datos en los Algoritmos de Programación
- Expresión const en JavaScript
- Expresión let en JavaScript
- Introducción al Lenguaje de Programación CSS
- Intérprete de Python