Как спрятать всё, что не поместилось в элементе. CSS-свойство overflow
- 14 мая 2023
CSS-свойство overflow
отвечает за то, что происходит с содержимым блочного элемента, когда оно выходит за границы. Например, если картинка выпадает из родительского контейнера, вы можете её обрезать или добавить полосу прокрутки.
Чтобы указать, как должно отображаться содержимое элемента…
<div class="container">
<p>Константиновский Константин Константинович</p>
</div>
…нужно задать этому элементу стили:
.container {
overflow: auto;
}
В этом примере мы добавим контейнеру полосу прокрутки, если имя не будет в нём помещаться.
Значения overflow
По умолчанию у overflow
стоит значение visible
, то есть содержимое будет отображаться как есть. Например, слишком длинный текст выйдет за пределы родительского элемента.

Значение hidden
скрывает часть содержимого, которая не поместилась в контейнере.

Значение scroll
добавляет полосы прокрутки.

Значение auto
автоматически определяет, нужно ли добавлять полосы прокрутки. Полосы появляются, когда содержимое выпадает из родительского контейнера, и исчезают, если оно помещается целиком.
Это значение более гибкое: при overflow: scroll
полосы прокрутки сохраняются, даже если элемент помещается в контейнере, а при overflow: auto
они исчезают.

Ошибки при использовании overflow
Использовать overflow: hidden
для обрезки важного текста — пользователь не увидит спрятанную информацию и не поймёт написанное. Гораздо уместнее использовать это значение для оформления сайта, например, чтобы обрезать часть декоративного изображения.
Использовать overflow: scroll
для всего содержимого страницы — если так сделать, на странице появятся лишние полосы прокрутки.
Наследуется ли свойство overflow
Свойство не наследуется, но дочерние элементы будут отображаться с учётом значения overflow
. Например, здесь текст «Я вообще не влезаю в эту строку» обрежется, если выйдет за пределы <div class="parent">
:
<div class="parent">
<div>
Я вообще не влезаю в эту строку
</div>
</div>
.parent {
overflow: hidden;
}
Для дочерних элементов можно прописать собственное значение overflow
:
<div class="parent">
<div class="child">
Я вообще не влезаю в эту строку
</div>
</div>
.parent {
overflow: hidden;
}
.child {
overflow: auto;
}
В этом примере мы задали дочернему элементу свойство overflow: auto
. То есть содержимое будет обрезано, но появится полоса прокрутки.

Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Как создать рамку вокруг элемента. CSS-свойство border
Цветные, точечные, пунктирные рамки и многое другое.
- 31 мая 2023

Как сделать анимацию любой сложности. Свойство animation
Примеры и нюансы использования.
- 29 мая 2023

Как создать тени на CSS: свойство box-shadow
Внутренние, внешние, с градиентом — на все случаи жизни.
- 28 мая 2023

Как установить стиль шрифта. CSS-свойство font
Семейства шрифтов, начертание и размеры.
- 27 мая 2023

Как работает transform в CSS на примерах
Интерактивная статья — попробуйте анимировать сами.
- 23 мая 2023

Как оформить текст: 11 главных CSS-свойств
Инструкция для любителей поиграться со шрифтами.
- 23 мая 2023




Как создать сетки на CSS Grid Layout
Чтобы сайт был красивым, а вёрстка не ломалась.
- 17 мая 2023