Propiedad de desbordamiento de CSS
Ejemplo
Mostrar diferentes valores de propiedad de desbordamiento:
div.ex1 {
overflow: scroll;
}
div.ex2 {
overflow: hidden;
}
div.ex3 {
overflow:
auto;
}
div.ex4 {
overflow: visible;
}
Definición y uso
La overflow
propiedad especifica lo que debería suceder si el contenido desborda el cuadro de un elemento.
Esta propiedad especifica si recortar el contenido o agregar barras de desplazamiento cuando el contenido de un elemento es demasiado grande para caber en un área específica.
Nota: la overflow
propiedad solo funciona para elementos de bloque con una altura especificada.
Valor por defecto: | visible |
---|---|
Heredado: | No |
Animable: | No. Leer sobre animable |
Versión: | CSS2 |
Sintaxis de JavaScript: | objeto .style.overflow="desplazamiento" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Property | |||||
---|---|---|---|---|---|
overflow | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
Nota: En OS X Lion (en Mac), las barras de desplazamiento están ocultas de forma predeterminada y solo se muestran cuando se usan (aunque esté configurado "desbordamiento: desplazamiento").
Sintaxis CSS
overflow: visible|hidden|scroll|auto|initial|inherit;
Valores de propiedad
Value | Description | Play it |
---|---|---|
visible | The overflow is not clipped. It renders outside the element's box. This is default | |
hidden | The overflow is clipped, and the rest of the content will be invisible | |
scroll | The overflow is clipped, but a scroll-bar is added to see the rest of the content | |
auto | If overflow is clipped, a scroll-bar should be added to see the rest of the content | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
páginas relacionadas
Tutorial de CSS: Desbordamiento de CSS
Tutorial CSS: Posicionamiento CSS
Referencia HTML DOM: propiedad de desbordamiento