Overflow

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 41 de 76.

En CSS, la propiedad overflow controla lo que sucede con el contenido que desborda la caja de su elemento. Cuando el contenido de un elemento es demasiado grande para caber dentro del ancho y alto especificados, la propiedad overflow determina si se debe recortar el contenido, añadir barras de desplazamiento o mostrar el contenido desbordado fuera de los límites del elemento.

Aquí tienes la sintaxis básica para usar la propiedad overflow:

selector {
    overflow: value;
}

value: El comportamiento de desbordamiento deseado, que puede ser uno de los siguientes:

visible: Este es el valor predeterminado. El contenido que se desborda se representa fuera de la caja del elemento y puede superponerse a los elementos adyacentes.

hidden: El contenido que se desborda se recorta y el resto del contenido es invisible.

scroll: Añade barras de desplazamiento (tanto horizontales como verticales) al elemento, permitiendo a los usuarios desplazarse por el contenido que se desborda.

auto: El navegador determina si debe añadir barras de desplazamiento en función del contenido y el espacio disponible. Normalmente, las barras de desplazamiento se añaden solo cuando es necesario.

Por ejemplo:

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

En este ejemplo, a todos los elementos <div> con un ancho de 200px y una altura de 100px se les añadirán barras de desplazamiento para ver cualquier contenido que se desborde.

También puedes controlar el comportamiento del desbordamiento para las direcciones horizontal y vertical de forma independiente utilizando las propiedades overflow-x y overflow-y:

.example {
    overflow-x: hidden; /* Ocultar el desbordamiento horizontal */
    overflow-y: scroll; /* Añadir una barra de desplazamiento vertical */
}

Desafío

Fácil

Se te proporciona un documento HTML con una división (<div>) que contiene un párrafo (<p>) con un texto largo. Tu tarea es utilizar la propiedad overflow para controlar cómo se muestra el contenido que se desborda. Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <div>. Establece el width a 300px, el height a 150px y el border a 1px solid black.
Establece la propiedad overflow del <div> a scroll para añadir barras de desplazamiento al elemento.

Hoja de referencia

La propiedad overflow controla lo que sucede con el contenido que desborda la caja de su elemento:

selector {
    overflow: value;
}

Valores de overflow:

visible: Predeterminado. El contenido se desborda fuera de la caja del elemento
hidden: El contenido desbordado se recorta y es invisible
scroll: Añade barras de desplazamiento (horizontal y vertical)
auto: El navegador añade barras de desplazamiento solo cuando es necesario

Ejemplo:

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

Controlar el desbordamiento horizontal y vertical de forma independiente:

.example {
    overflow-x: hidden; /* Ocultar desbordamiento horizontal */
    overflow-y: scroll; /* Añadir barra de desplazamiento vertical */
}

Pruébalo tú mismo

<html>
<head>
    <title>Overflow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>
        <p>This is a long text that will likely overflow its container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</body>
</html>