Overflow

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 41 de 76.

No CSS, a propriedade overflow controla o que acontece com o conteúdo que ultrapassa o limite da caixa do seu elemento. Quando o conteúdo de um elemento é grande demais para caber na largura e altura especificadas, a propriedade overflow determina se deve recortar o conteúdo, adicionar barras de rolagem ou exibir o conteúdo excedente fora dos limites do elemento.

Aqui está a sintaxe básica para usar a propriedade overflow:

selector {
    overflow: value;
}

value: O comportamento de transbordamento (overflow) desejado, que pode ser um dos seguintes:

visible: Este é o valor padrão. O conteúdo excedente é renderizado fora da caixa do elemento e pode sobrepor elementos adjacentes.

hidden: O conteúdo excedente é recortado e o restante do conteúdo fica invisível.

scroll: Adiciona barras de rolagem (tanto horizontais quanto verticais) ao elemento, permitindo que os usuários rolem pelo conteúdo que transborda.

auto: O navegador determina se deve adicionar barras de rolagem com base no conteúdo e no espaço disponível. Normalmente, as barras de rolagem são adicionadas apenas quando necessário.

Por exemplo:

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

Neste exemplo, todos os elementos <div> com uma largura de 200px e uma altura de 100px terão barras de rolagem adicionadas para visualizar qualquer conteúdo excedente.

Você também pode controlar o comportamento de transbordamento para as direções horizontal e vertical independentemente usando as propriedades overflow-x e overflow-y:

.example {
    overflow-x: hidden; /* Ocultar o transbordamento horizontal */
    overflow-y: scroll; /* Adicionar uma barra de rolagem vertical */
}

Desafio

Fácil

Você recebeu um documento HTML com uma divisão (<div>) que contém um parágrafo (<p>) com um texto longo. Sua tarefa é usar a propriedade overflow para controlar como o conteúdo excedente é exibido. Siga os passos abaixo:

Escreva uma regra CSS que tenha como alvo o elemento <div>. Defina a width como 300px, a height como 150px e a border como 1px solid black.
Defina a propriedade overflow da <div> como scroll para adicionar barras de rolagem ao elemento.

Folha de consulta

A propriedade overflow controla o que acontece com o conteúdo que ultrapassa o limite da caixa do elemento:

selector {
    overflow: value;
}

Valores de overflow:

visible: Padrão. O conteúdo ultrapassa os limites da caixa do elemento
hidden: O conteúdo excedente é cortado e fica invisível
scroll: Adiciona barras de rolagem (horizontal e vertical)
auto: O navegador adiciona barras de rolagem apenas quando necessário

Exemplo:

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

Controle o overflow horizontal e vertical de forma independente:

.example {
    overflow-x: hidden; /* Oculta o overflow horizontal */
    overflow-y: scroll; /* Adiciona barra de rolagem vertical */
}

Experimente você mesmo

<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>