css overflow: todos los valores de la propiedad

Tener cierto manejo con el lenguaje css es esencial si aspiras a convertirte en un desarrollador front-end. Este lenguaje tiene una serie de propiedades y reglas que, si se dominan, te permiten personalizar tu sitio web de una manera muy detallada y personal.

css que es

Cascading Style-Sheets, identifica el lenguaje de markup para crear nuestras hojas de estilo. CSS, junto con el lenguaje HTML y el lenguaje Javascript es una de las herramientas fundamentales para el desarrollo web. Principalmente interactúa con HTML y permite al desarrollador especificar las características de los elementos de la página web (fuentes, diseño, imágenes…) todo a través de reglas y propiedades específicas.

En este artículo hablaremos sobre la propiedad overflow CSS. Una de los más importantes de este lenguaje, ya que te permite controlar lo que sucede cuando el contenido de un elemento es demasiado grande para caber en un área. Cuando esto sucede, el contenido "se derrama" en otra área, ya sea horizontalmente (eje X) o verticalmente (eje Y). Los principales valores de la propiedad overflow son los siguientes:

• Visible: este es el valor predeterminado que asume la propiedad overflow si no se especifica ninguno. Con esta propiedad, podemos ver claramente nuestro contenido cuando inunda a otra área de la página web. Veamos un ejemplo juntos.

<div>
    <p>
        Aulab Hackademy es el Curso de Coding Online para Convertirse en Desarrollador Web en 3 meses. Clases
        en directo live streaming, ejercicios prácticos seguidos por tutores y material didáctico en la
        plataforma online.
    </p>
</div>

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
}

p{
    color: green;
}

En este caso, el texto se ubica convenientemente en el contenedor blanco sin sobrepasar el borde del contenedor en ambos ejes. Pero no siempre es así.

Es posible que estés trabajando en un proyecto y luego te dés cuenta de que un fragmento de texto cruza el borde. Algo como esto:

<div>
    <p>
        Aulab Hackademy es el Curso de Coding Online para Convertirse en Desarrollador Web en 3 meses. Clases
        en directo live streaming, ejercicios prácticos seguidos por tutores y material didáctico en la
        plataforma online. Aulab Hackademy es el Curso de Coding Online para Convertirse en Desarrollador
        Web en 3 meses. Clases en directo live streaming, ejercicios prácticos seguidos por tutores y
        material didáctico en la plataforma online. Aulab Hackademy es el Curso de Coding Online para
        Convertirse en Desarrollador Web en 3 meses. Clases en directo live streaming, ejercicios
        prácticos seguidos por tutores y material didáctico en la plataforma online.
    </p>
</div>

El estilo CSS sigue siendo el mismo. Pero el texto se desbordará del tamaño del contenedor blanco que lo contiene. En un proyecto de la vida real, esto sería aún más molesto porque tendría este texto superpuesto en otros elementos de la página. Podemos ver el texto desbordado en otra área (que no es su contenedor), porque el valor predeterminado aquí es visible incluso si no lo hemos especificado.

Vamos a agregarlo al código CSS para que podamos ver la propiedad aplicada:

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
    overflow: visible;
}

p{
    color: green;
}

Incluso después de especificar que la propiedad de desbordamiento sea visible, el resultado seguirá siendo el mismo. Debes aprovechar otros valores de propiedad de desbordamiento de CSS para solucionar este problema.

• Hidden: Con Hidden se recortará la parte del texto que sobresale del contenedor, para volverse "invisible". No tienes que preocuparte por el espacio ocupado por el desbordamiento. Una vez que se haya recortado el contenido, ya no estará en el área donde se desbordó. Veremos un ejemplo antes de hablar de por qué esta no es la mejor solución. Agreguemos el valor oculto:

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
    overflow: hidden;
}

p{
    color: green;
}

Gracias al valor hidden resolvemos el problema de tener contenido en un área donde no debería estar, pero no proporciona una forma de acceder al contenido que se ha cortado.

• Scroll: Entonces sabemos que el valor hidden recorta y oculta lo que inunda los elementos que no lo contienen. Pero el valor scroll también corta el texto y proporciona una barra de desplazamiento para que podamos desplazarnos y ver la parte del texto que se ha cortado.

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
    overflow: scroll;
}

p{
    color: green;
}

Ahora tenemos barras de desplazamiento en ambos ejes. El texto será visible en su totalidad y no inundará los elementos circundantes.

• Auto: Al asignar el valor auto la barra de desplazamiento aparece solo verticalmente. Este valor detecta la posición del desbordamiento de texto y agrega una barra de desplazamiento en esa dirección.

No se han agregado barras de desplazamiento horizontalmente porque no tenemos overflow de contenido en ese eje.

• overflow-x y overflow-y: especifican lo que sucede horizontal y verticalmente. Significa que puedo usar los valores que acabo de enumerar solo en una dirección, según el eje elegido.

A través de este tutorial podrás aprender el control de overflow de un contenido dentro de una página web, que no necesariamente es un texto. Para obtener más información y mejorar tus habilidades con el lenguaje CSS, consulta nuestro artículo sobre ejercicios de CSS y nuestra guía de html y css en español.