Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
Contenido desbordado
En este artículo veremos otro concepto importante en CSS: eldesbordamiento. El desbordamiento es lo que sucede cuando hay demasiado contenido para que pueda caber cómodamente en una caja. En esta guía aprenderás qué es y cómo administrarlo.
| Prerrequisitos: | Conocimientos básicos de informática, tener elsoftware básico instalado, conocimientos básicos detrabajar con archivos, conocimientos básicos de HTML (véaseIntroducción al HTML) y nociones de CSS (véasePrimeros pasos con el CSS). |
|---|---|
| Objetivo: | Comprender el desbordamiento y cómo gestionarlo. |
¿Qué es el desbordamiento?
Ya sabemos que todo en CSS está dentro de una caja, y que podemos restringir el tamaño de estas cajas asignándoles los valoreswidth yheight (oinline-size yblock-size).El desbordamiento es lo que sucede cuando hay demasiado contenido en una caja, y no cabe cómodamente en ella. El CSS te proporciona varias herramientas para administrar este desbordamiento, y además es un concepto que resulta útil de conocer desde las primeras etapas. Te encontrarás con situaciones de desbordamiento con bastante frecuencia al escribir CSS, especialmente cuando profundices en compaginación con CSS.
El CSS trata de evitar «la pérdida de datos»
Vamos a comenzar con dos ejemplos que demuestran cómo se comporta el CSS por defecto cuando ocurre un desbordamiento.
El primero consiste en una caja a la que se le ha restringido la dimensión al darle una altura. Luego hemos añadido más contenido del que cabe en la caja. El contenido se desborda y se distribuye desordenadamente sobre el párrafo que hay debajo de la caja.
El segundo consiste en una palabra dentro de una caja cuya dimensión en línea está restringida. La caja se ha hecho demasiado pequeña para que esa palabra quepa, y se desborda.
Te debes estar preguntando por qué el CSS ha tomado por defecto el enfoque más bien desarreglado de provocar el desbordamiento desordenado del contenido. ¿Por qué no ocultar el contenido adicional o hacer crecer la caja?
Siempre que sea posible, el CSS no oculta su contenido; hacerlo provocaría la pérdida de datos, que generalmente es un problema. En términos de CSS, esto significa que una parte del contenido desaparece. El problema con que desaparezca contenido es que podría ser que no notaras que ha desaparecido. Tus visitantes podrían no darse cuenta de que ha desaparecido contenido. Si se trata del botón de envío de datos en un formulario, nadie podría completar el formulario, y ¡eso es un gran problema! Así que, en vez de esto, el CSS tiende a desbordarse de un modo que sea visible. Es probable que te des cuenta de ese desarreglo, o en el peor de los casos, que un visitante de tu sitio web te informe de que una parte del contenido se superpone y debas arreglarlo.
Si has restringido el tamaño de una caja con una anchura o una altura determinadas, el CSS asume que sabes lo que haces y que gestionas correctamente el potencial de desbordamiento. En general, restringir el tamaño de un bloque es problemático cuando el texto se va a poner en una caja, porque puede haber más texto del que te esperabas al diseñar el sitio o el tamaño del texto puede ser mayor, por ejemplo, si el usuario lo aumenta.
En los artículos siguientes veremos diferentes modos de controlar el tamaño que podrían ser menos propensos a desbordarse. Sin embargo, si necesitas un tamaño fijo, también puedes controlar cómo se comporta el desbordamiento. ¡Sigue leyendo!
La propiedadoverflow
La propiedadoverflow es el modo como tomas el control del desbordamiento de un elemento y le dices al navegador cómo desea que se comporte. El valor predeterminado para la propiedadoverflow esvisible, por lo que, de forma predeterminada vamos a poder ver cuándo se desborda nuestro contenido.
Si deseas cortar el contenido cuando se desborda, puedes establecer el valoroverflow: hidden en tu caja, que hace exactamente lo que dice: ocultar el desbordamiento. Esto puede hacer que las cosas desaparezcan, por lo que solo debes utilizar esta opción si ocultar contenido no te va a causar ningún problema.
Quizás te gustaría añadir barras de desplazamiento cuando el contenido se desborde. Si usasoverflow: scroll, tu navegador siempre mostrará barras de desplazamiento, incluso cuando no haya suficiente contenido para que pueda desbordarse. Es posible que desees hacer esto, porque evita que aparezcan y desaparezcan barras de desplazamiento según el contenido.
Si en la caja siguiente eliminas parte del contenido, observarás que las barras de desplazamiento permanecen aun sin que haya nada que desplazar (o, como mucho, solo las pistas de la barra de desplazamiento).
En el ejemplo anterior solo necesitamos desplazarnos en el ejey, sin embargo, obtenemos barras de desplazamiento en ambos ejes. En su lugar, puedes usar la propiedadoverflow-y, y estableceroverflow-y: scroll para poder desplazarte solo por el ejey.
También puedes desplazarte por el ejex usandooverflow-x, aunque esta no es una forma recomendada para manejar palabras largas. Si necesitas lidiar con una palabra larga en una caja pequeña, puedes consultar las propiedadesword-break ooverflow-wrap. Además, algunos de los métodos expuestos en el artículoElementos de dimensionado en CSS pueden ayudarte a crear cuadros que se adapten mejor a cantidades variables de contenido.
Al igual que con el desplazamiento, obtendrás una barra de desplazamiento en la dimensión de desplazamiento independientemente de si hay suficiente contenido para provocar una barra de desplazamiento.
Nota:Observa que puedes especificar un desplazamiento enx y eny utilizando la propiedadoverflow y pasando dos valores. Si especificas dos palabras clave, la primera se aplica aoverflow-x y la segunda aoverflow-y. De lo contrario, tantooverflow-x comooverflow-y se fijan en el mismo valor. Por ejemplo,overflow: scroll hidden estableceoverflow-x enscroll yoverflow-y enhidden.
Si deseas que aparezcan barras de desplazamiento solo si hay más contenido del que cabe en la caja, utilizaoverflow: auto. En este caso, el navegador decide si muestra las barras de desplazamiento o no. Los navegadores de escritorio solo suelen hacerlo cuando hay contenido suficiente para causar desbordamiento.
En el ejemplo siguiente, elimina parte del contenido hasta que quepa en la caja y observarás que las barras de desplazamiento desaparecen.
overflow establece un contexto de formato de bloque
En CSS hay un concepto conocido comoblock formatting context o BFC (contexto de formato de bloque). No es algo de lo que debas preocuparte demasiado en este momento, pero es útil saber que cuando usas un valor deoverflow, comoscroll oauto, creas un BFC. El resultado es que el contenido de la caja al que acabas de cambiar el valoroverflow se convierte en un minidiseño propio. Las cosas que están fuera del contenedor no pueden meterse en él, y nada puede sobresalir de esa caja hacia el diseño circundante. Esto es para permitir un comportamiento con desplazamiento, porque para poder crear una experiencia de desplazamiento consistente todo el contenido de tu caja ha de estar contenido en algo, y no puede superponerse con otros elementos de la página.
Desbordamiento no deseado en diseño web
Los métodos de diseño modernos (explicados en el móduloDiseñar con el CSS) gestionan muy bien el desbordamiento. Han sido diseñados para hacer frente al hecho de que tendemos a no poder predecir cuánto contenido habrá en la web. Sin embargo, en el pasado, los desarrolladores a menudo usaban alturas fijas para tratar de alinear los fondos de cajas que en realidad no tenían relación entre sí. Este método era frágil y, en una aplicación heredada, ocasionalmente puede aparecer una caja en que el contenido se superpone a otro contenido de la página. Si ves esto, sabrás que se trata de desbordamiento. Lo ideal sería volver a calcular el diseño para no tener que confiar tamaños de caja fijos.
Al desarrollar un sitio web, siempre debes tener en cuenta los problemas de desbordamiento. Debes probar diseños con cantidades grandes y pequeñas de contenido, aumentar el tamaño de letra... y asegurarte de que tu CSS puede hacerle frente sin ningún problema. Es probable que cambiar el valor deoverflow para ocultar contenido o añadir barras de desplazamiento sea algo que debas reservar solo para unos pocos casos especiales, en que realmente desees una caja con barra de desplazamiento, por ejemplo.
Pon a prueba tus conocimientos
Hay mucho que absorber en esta lección. ¿Recuerdas la información más importante? Para comprobarlo, ve aTest your skills: overflow.
Resumen
Este breve artículo ha introducido el concepto de desbordamiento; ahora comprendes que el CSS intenta no hacer invisible el desbordamiento de contenido, porque esto provoca la pérdida de datos. Has descubierto que puedes gestionar el desbordamiento potencial y también que debes probar tu trabajo para asegurarte de que no causa un desbordamiento problemático accidentalmente.