CSS overflow: hidden, auto, scroll, clip — понятное руководство с примерами
Если ваш блок имеет фиксированную ширину или высоту, возникает вопрос: что делать с лишним содержимым? Ответом управляет CSS overflow. Правильно подобранное значение решает десятки задач — от аккуратной обрезки карточек до отключения скролла страницы под модальным окном.
Что такое CSS overflow и когда он срабатывает
Свойство overflow определяет поведение содержимого, выходящего за пределы области прокрутки элемента (scrollport). Обычно оно актуально, когда у блока есть ограничение по размерам (width/height, max-height и т.п.) и содержимое не влезает.
Значения overflow: краткий обзор
Также есть осевые варианты: overflow-x и overflow-y, которые задают поведение отдельно по горизонтали и вертикали.
Базовый пример: сравниваем hidden, auto, scroll и clip
<style>
.box { width: 280px; height: 120px; border: 2px solid #333; margin: 12px 0; }
.box p { margin: 0; padding: 8px; line-height: 1.4; }
#v { overflow: visible; }
#h { overflow: hidden; }
#s { overflow: scroll; }
#a { overflow: auto; }
#c { overflow: clip; }
</style>
<div id="v" class="box"><p>visible: содержимое выходит за рамки блока и продолжает отображаться снаружи, без скролла.</p></div>
<div id="h" class="box"><p>hidden: лишний текст будет обрезан. Полос прокрутки нет.</p></div>
<div id="s" class="box"><p>scroll: полосы прокрутки видны всегда, даже если весь текст помещается в блок.</p></div>
<div id="a" class="box"><p>auto: полосы появятся только при переполнении. Это обычно оптимальный выбор.</p></div>
<div id="c" class="box"><p>clip: поведение похоже на hidden, но стандартно не предусматривает прокрутку содержимого.</p></div>
overflow-x и overflow-y: точечный контроль осей
Частая задача — разрешить вертикальную прокрутку, но обрезать горизонтальный скролл (чтобы не появлялась нижняя полоса прокрутки из-за длинных слов или картинок).
<style>
.scroll-y { max-height: 180px; overflow-y: auto; overflow-x: hidden; }
.item { padding: 8px 12px; border-bottom: 1px solid #eee; white-space: nowrap; }
</style>
<div class="scroll-y">
<div class="item">Строка 1 — длинное-длиннющее слово: СверхкалибровочныйПараллелепипед</div>
<div class="item">Строка 2</div>
<div class="item">Строка 3</div>
<div class="item">Строка 4</div>
<div class="item">Строка 5</div>
</div>
Здесь вертикальный список прокручивается, а горизонтальное переполнение скрыто.
Многоточие для длинных строк: text-overflow: ellipsis
Чтобы заменить «лишний» конец строки на многоточие, одних text-overflow: ellipsis недостаточно. Нужны три условия: фиксированная или ограниченная ширина, white-space: nowrap и overflow: hidden (или clip).
<style>
.title {
width: 260px;
white-space: nowrap;
overflow: hidden; /* или clip */
text-overflow: ellipsis; /* многоточие */
border: 1px solid #ddd; padding: 6px 8px;
}
</style>
<div class="title">Очень длинный заголовок карточки товара, который не помещается</div>
Для многоточия в несколько строк используйте сочетание display: -webkit-box и -webkit-line-clamp (поддержка хорошая в современных браузерах):
<style>
.multi-ellipsis {
width: 260px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* количество строк */
overflow: hidden;
}
</style>
<div class="multi-ellipsis">
Текст анонса, который займёт много места, но мы хотим показать только первые три строки,
а остальное скрыть с аккуратным окончанием.
</div>
Отключение скролла страницы для модалки без «дёрганья» контента
Классическая проблема: при открытии модального окна мы ставим у body { overflow: hidden; }, полоса прокрутки исчезает, и из‑за этого контент «прыгает» вправо. Решение — свойство scrollbar-gutter: stable (можно добавить both-edges для надёжности).
<style>
/***** базовая страница *****/
html { scrollbar-gutter: stable both-edges; }
body.modal-open { overflow: hidden; }
/***** упрощённая модалка *****/
.modal {
position: fixed; inset: 0; display: grid; place-items: center;
background: rgba(0,0,0,0.5);
}
.modal__window {
max-width: 560px; width: 90%; background: #fff; padding: 24px; border-radius: 10px;
max-height: 80vh; overflow: auto; /* модальное окно может скроллиться внутри */
}
</style>
<!-- при открытии модалки добавляйте на body класс modal-open -->
<div class="modal" hidden>
<div class="modal__window">Содержимое модального окна</div>
</div>
Так мы избегаем смещения из‑за исчезающего скроллбара и не блокируем прокрутку внутри самой модалки.
overflow как способ изоляции потока и фикса мелких багов в вёрстке
Любое значение overflow, кроме visible, создаёт новый контекст форматирования. Это удобно, когда нужно:
<style>
.parent { border: 2px solid #5a67d8; margin: 16px 0; }
.child { margin-top: 20px; background: #edf2f7; }
.fix { overflow: hidden; } /* создаёт новый контекст, margin не «схлопнется» вверх */
</style>
<div class="parent">
<div class="child">Без фикса: верхний margin «уходит» за пределы родителя</div>
</div>
<div class="parent fix">
<div class="child">С overflow: margin работает ожидаемо</div>
</div>
Когда выбирать clip вместо hidden
overflow: clip похож на hidden, но спецификация чётко запрещает появление полос прокрутки и прокрутки содержимого. Это полезно для строгой обрезки декоративных эффектов (например, теней), когда нам принципиально не нужна прокрутка и мы хотим избежать неожиданных сценариев со скроллом, в том числе скриптовым.
Частые ошибки и как их избежать
Мини‑чеклист выбора значения
Итого
CSS overflow — базовый, но мощный инструмент управления переполнением, прокруткой и изоляцией контента. Освоив hidden, auto, scroll и clip, вы избежите «ползущих» макетов, сделаете модалки без дёрганья и аккуратно обработаете длинные строки. Хотите системно прокачать вёрстку на реальных макетах и закрепить такие приёмы на практике? Загляните в курс: Прокачать вёрстку на реальных проектах — «Вёрстка сайта с нуля 2.0».
