CSS overflow: hidden, auto, scroll, clip — понятное руководство с примерами

Если ваш блок имеет фиксированную ширину или высоту, возникает вопрос: что делать с лишним содержимым? Ответом управляет CSS overflow. Правильно подобранное значение решает десятки задач — от аккуратной обрезки карточек до отключения скролла страницы под модальным окном.

Что такое CSS overflow и когда он срабатывает

Свойство overflow определяет поведение содержимого, выходящего за пределы области прокрутки элемента (scrollport). Обычно оно актуально, когда у блока есть ограничение по размерам (width/height, max-height и т.п.) и содержимое не влезает.

Значения overflow: краткий обзор

• visible (по умолчанию): содержимое выходит за рамки и остаётся видимым. Скролла нет.
• hidden: лишнее содержимое обрезается, без полос прокрутки.
• scroll: всегда показываются полосы прокрутки (даже если всё влезает).
• auto: полосы прокрутки появляются только при необходимости.
• clip: обрезка как у hidden, но принципиально без прокрутки и без возможности прокрутить содержимое скриптами по оси (кроме специальных случаев).

Также есть осевые варианты: 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, создаёт новый контекст форматирования. Это удобно, когда нужно:

• Пресечь «выпадение» float-элементов из контейнера без clearfix: достаточно поставить overflow: auto/hidden у родителя.
• Остановить схлопывание внешних отступов (margin collapsing) между родителем и первым дочерним блоком.

<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, но спецификация чётко запрещает появление полос прокрутки и прокрутки содержимого. Это полезно для строгой обрезки декоративных эффектов (например, теней), когда нам принципиально не нужна прокрутка и мы хотим избежать неожиданных сценариев со скроллом, в том числе скриптовым.

Частые ошибки и как их избежать

• Обрезали важный контент hidden/clip. Всегда проверяйте доступность: критичный текст должен быть доступен пользователю и ассистивным технологиям. Для интерактивных областей предпочитайте auto/scroll внутри ограниченного окна.
• «Лечим» горизонтальную прокрутку у body через overflow-x: hidden. Это скрывает проблему, а не решает. Лучше найти «виновника» (слишком широкий элемент) и исправить его стиль или расчёт ширины.
• position: sticky не работает. Родитель с overflow, отличным от visible, может помешать sticky. Старайтесь, чтобы липкий элемент находился внутри контейнера без overflow или выносите sticky выше по дереву.
• Скролллок без компенсации. При модалках используйте scrollbar-gutter: stable, чтобы не было скачка макета при появлении/исчезновении полосы прокрутки.

Мини‑чеклист выбора значения

• Нужно обрезать без прокрутки — hidden или clip (строгая обрезка)/ellipsis для текста.
• Нужна прокрутка по требованию — auto (чаще всего лучший выбор).
• Полосы скролла всегда видимы — scroll (полезно при стабильной вёрстке таблиц/виджетов).
• Контроль по осям — комбинируйте overflow-x и overflow-y.

Итого

CSS overflow — базовый, но мощный инструмент управления переполнением, прокруткой и изоляцией контента. Освоив hidden, auto, scroll и clip, вы избежите «ползущих» макетов, сделаете модалки без дёрганья и аккуратно обработаете длинные строки. Хотите системно прокачать вёрстку на реальных макетах и закрепить такие приёмы на практике? Загляните в курс: Прокачать вёрстку на реальных проектах — «Вёрстка сайта с нуля 2.0».