Desbordamiento

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 41 de 76.

En CSS, la propiedad overflow controla qué sucede con el contenido que desborda el cuadro 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 recorta el contenido, se añaden barras de desplazamiento o se muestra el contenido desbordado fuera de los límites del elemento.

Esta es 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 desbordado se muestra fuera del box del elemento y puede superponerse a elementos adyacentes.

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

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

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

Por ejemplo:

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

En este ejemplo, todos los elementos <div> con un ancho de 200px y una altura de 100px tendrán barras de desplazamiento añadidas para ver cualquier contenido desbordado.

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

.example {
    overflow-x: hidden; /* Hide horizontal overflow */
    overflow-y: scroll; /* Add a vertical scrollbar */
}

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 usar la propiedad overflow para controlar cómo se muestra el contenido desbordado. Sigue los pasos siguientes:

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

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>