Переполнение

Часть раздела Стилизация с CSS путешествия по HTML на Coddy. Урок 41 из 76.

В CSS свойство overflow управляет тем, что происходит с содержимым, выходящим за пределы блока элемента. Когда содержимое элемента слишком велико, чтобы поместиться в заданные ширину и высоту, свойство overflow определяет, следует ли обрезать содержимое, добавить полосы прокрутки или отобразить выходящее за пределы содержимое за границами элемента.

Вот базовый синтаксис использования свойства overflow:

selector {
    overflow: value;
}

value: Желаемое поведение при переполнении, которым может быть один из следующих вариантов:

visible: Это значение по умолчанию. Переполняющее содержимое отображается за пределами элемента box и может перекрывать соседние элементы.

hidden: переполняющее содержимое обрезается, а остальная часть содержимого невидима.

scroll: добавляет полосы прокрутки (горизонтальную и вертикальную) к элементу, позволяя пользователям прокручивать переполняющее содержимое.

auto: Браузер определяет, добавлять ли полосы прокрутки, на основе содержимого и доступного пространства. Обычно полосы прокрутки добавляются только при необходимости.

Например:

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

В этом примере ко всем элементам <div> с шириной 200px и высотой 100px будут добавлены полосы прокрутки для просмотра любого переполняющегося содержимого.

Вы также можете независимо управлять поведением переполнения для горизонтального и вертикального направлений с помощью свойств overflow-x и overflow-y:

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

Задание

Легко

Вам дан HTML-документ с элементом <div>, содержащим абзац (<p>) с длинным текстом. Ваша задача — использовать свойство overflow, чтобы управлять отображением переполняющего содержимого. Выполните следующие шаги:

Напишите правило CSS, нацеленное на элемент <div>. Установите width равным 300px, height равным 150px, а border — равным 1px solid black.
Установите для свойства overflow элемента <div> значение scroll, чтобы добавить полосы прокрутки к элементу.

Попробуйте сами

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