La overflowpropiedad controla lo que sucede con el contenido que se sale de sus límites: imagina una diven la que has establecido explícitamente que tenga 200 px de ancho, pero que contenga una imagen de 300 px de ancho. Esa imagen sobresaldrá del div y estará visiblepor defecto. Mientras que si establece el overflowvalor en hidden, la imagen se cortará a 200px.
div ( overflow: visible | hidden | scroll | auto | inherit )Valores
visible: el contenido no se recorta cuando procede fuera de su caja. Este es el valor predeterminado de la propiedad.hidden: se ocultará el contenido desbordado.scroll: similar a oculto, excepto que los usuarios podrán desplazarse por el contenido ocultoauto: si el contenido procede fuera de su caja, entonces ese contenido se ocultará mientras que una barra de desplazamiento debería estar visible para que los usuarios lean el resto del contenido.initial: utiliza el valor predeterminado que esvisibleinherit: establece el desbordamiento en el valor de su elemento padre.
Recuerde que el texto se ajustará naturalmente al final de un elemento (a menos que se cambie el espacio en blanco) por lo que el texto rara vez será la causa del desbordamiento. A menos que se establezca una altura, el texto solo empujará un elemento más alto también. El desbordamiento entra en juego con más frecuencia cuando se establecen anchos y alturas explícitos y no sería deseable que se derramara ningún contenido, o cuando se evita explícitamente el desplazamiento.
Visible
Si no establece la propiedad de desbordamiento en absoluto, el valor predeterminado es visible. Entonces, en general, no hay razón para establecer explícitamente esta propiedad como visible a menos que la anule para que no se establezca en otro lugar.
Lo importante a recordar aquí es que aunque el contenido es visible fuera del cuadro, ese contenido no afecta el flujo de la página. Por ejemplo:
En general, de todos modos, no debería establecer alturas estáticas en cuadros con texto web en ellos, por lo que no debería aparecer.
Oculto
Lo opuesto al visible predeterminado está oculto . Esto oculta literalmente cualquier contenido que se extienda más allá de la caja.
Esto es particularmente útil cuando se usa con contenido dinámico y la posibilidad de que un desbordamiento cause problemas graves de diseño. Sin embargo, tenga en cuenta que el contenido que se oculta de esta manera es completamente inaccesible (salvo ver la fuente). Entonces, por ejemplo, un usuario tiene su tamaño de fuente predeterminado establecido más grande de lo que cabría esperar, es posible que esté empujando el texto fuera de un cuadro y ocultándolo completamente de su vista.
Desplazarse
Establecer el valor de desbordamiento de un cuadro para desplazarse ocultará el contenido para que no se muestre fuera del cuadro, pero ofrecerá barras de desplazamiento para desplazarse por el interior del cuadro para ver el contenido.
Es de destacar que con este valor es que obtiene AMBAS barras de desplazamiento horizontales y verticales sin importar qué, incluso si el contenido requiere solo una u otra.
El desplazamiento de impulso de iOS se puede habilitar para este valor con -webkit-overflow-scrolling.
Nota: En OS X Lion, cuando las barras de desplazamiento están configuradas para mostrarse solo cuando se usan, se scrollcomporta más como auto, en el sentido de que solo se mostrarán las barras de desplazamiento necesarias.
Auto
El desbordamiento automático es muy similar al valor de desplazamiento, solo que resuelve el problema de obtener barras de desplazamiento cuando no las necesita. Las barras de desplazamiento solo se mostrarán si hay contenido que realmente se sale del elemento.
overflow-x y overflow-y
También es posible manipular el desbordamiento de contenido horizontal o verticalmente con las propiedades overflow-xy overflow-y. Por ejemplo, en la demostración siguiente, el desbordamiento horizontal se puede desplazar mientras que el texto que se extiende más allá de la altura del cuadro está oculto:
.box ( overflow-y: hidden; overflow-x: scroll; )Compensación de flotación
Uno de los usos más populares de la configuración de desbordamiento, por extraño que parezca, es la limpieza flotante. Establecer el desbordamiento no borra el flotador en el elemento, se borra automáticamente. Esto significa que el elemento con desbordamiento (cualquier valor excepto visible) se extenderá tanto como sea necesario para abarcar elementos secundarios en el interior que flotan (en lugar de colapsar), asumiendo que la altura no se declara. Como esto:
Una mejor técnica de compensación de flotadores es clearfix, ya que no requiere que modifiques la propiedad de desbordamiento de una manera que no necesitas.
Generando contexto de formato de bloque
Es interesante notar que overflowtambién creará un nuevo contexto de formato de bloque que es útil si queremos alinear un elemento de bloque junto a uno flotante. En el siguiente ejemplo, mostramos cómo varios párrafos interactuarán con una imagen flotante de forma predeterminada y luego usamos overflow: hiddenpara alinear el texto dentro de su propio cuadro:
Esto proviene de una gran publicación de Nicole Sullivan que inspiró el objeto de los medios.
¿Se pueden diseñar las barras de desplazamiento con CSS?
Solías poder diseñar barras de desplazamiento en IE (¿v5.5?) Pero ya no. Puede diseñarlos ahora nuevamente en los navegadores WebKit. Si necesita barras de desplazamiento personalizadas en varios navegadores, busque JavaScript.
Si un elemento necesita tener barras de desplazamiento agregadas para respetar el valor de desbordamiento, Firefox las coloca fuera del elemento, manteniendo el ancho / alto visible como se declaró. IE coloca las barras de desplazamiento adentro, manteniendo el ancho / alto total como se declaró.
Manifestación
Demostraciones para este artículo tomadas de esta página de muestra.
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Relacionado
- La propiedad flotante
Más información
- Entendiendo el Humilde Clearfix
- Desbordamiento: un beneficio secreto
- Desbordamiento en MDN
- Desbordamiento en W3C
- Encontrar / reparar un desbordamiento corporal no intencionado