Overflow

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

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

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

selector {
    overflow: value;
}

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

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

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

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

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

Например:

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

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

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

.example {
    overflow-x: hidden; /* Скрыть горизонтальное переполнение */
    overflow-y: scroll; /* Добавить вертикальную полосу прокрутки */
}

Задание

Легко

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

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

Шпаргалка

Свойство overflow управляет тем, что происходит с содержимым, которое выходит за пределы контейнера элемента:

selector {
    overflow: value;
}

Значения overflow:

visible: По умолчанию. Содержимое выходит за пределы контейнера элемента
hidden: Избыточное содержимое обрезается и становится невидимым
scroll: Добавляет полосы прокрутки (горизонтальную и вертикальную)
auto: Браузер добавляет полосы прокрутки только при необходимости

Пример:

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

Независимое управление горизонтальным и вертикальным переполнением:

.example {
    overflow-x: hidden; /* Скрыть горизонтальное переполнение */
    overflow-y: 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>