Исполняемые доки CSS: Overflow в CSS

Q: Чем overflow auto отличается от scroll?

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

Q: Как сделать прокрутку внутри div?

Ограничьте его размер и разрешите прокрутку: max-height: 300px; overflow-y: auto;. Без ограничения высоты или max-height div растет вместе с содержимым и никогда не переполняется.

Q: Почему overflow-x: hidden добавляет еще и вертикальную прокрутку?

Если одна ось hidden, scroll или auto, значение visible на другой оси вычисляется как auto. Используйте overflow-x: clip: он не создает контейнер прокрутки и оставляет другую ось видимой.

Q: Как добавить многоточие (...) к тексту, который не помещается?

Для одной строки: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; у элемента с ограниченной шириной. Для нескольких строк используйте display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.

Что делает overflow

Когда содержимое больше своего блока (фиксированная высота, длинное слово, широкая таблица), оно переполняет его. Свойство overflow решает, что будет с лишним:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overflow values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
    .box {
      width: 150px; height: 50px; padding: 8px;
      border: 2px solid #2563eb; background: #eff6ff;
      margin-bottom: 60px;
    }
    .visible { overflow: visible; }
    .hidden { overflow: hidden; }
    .scroll { overflow: scroll; }
    .auto { overflow: auto; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box visible"><b>visible</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box hidden"><b>hidden</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box scroll"><b>scroll</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box auto"><b>auto</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
  </div>
</body>
</html>

Значение	Что видно	Контейнер прокрутки
`visible` (по умолчанию)	Содержимое вылезает из блока и перекрывает то, что идет следом	Нет
`hidden`	Обрезается по краю padding, без полос прокрутки (скрипт все равно может прокрутить)	Да
`clip`	Обрезается, и прокрутки нет вообще, даже скриптом	Нет
`scroll`	Полосы прокрутки видны всегда, даже если содержимое помещается	Да
`auto`	Полосы прокрутки только когда содержимое не помещается	Да

В macOS и на телефонах полосы прокрутки накладываются на содержимое и исчезают, поэтому scroll и auto могут выглядеть одинаково, пока не начнете прокручивать.

Блок с прокруткой

Блок переполняется, только если что-то ограничивает его размер. height или max-height плюс overflow-y: auto превращают длинный список в прокручиваемую панель:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrollable list</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      max-height: 160px;
      overflow-y: auto;
      border: 1px solid #d1d5db; border-radius: 8px;
    }
    .panel p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="panel" id="panel">
    <p>Message 1</p><p>Message 2</p><p>Message 3</p><p>Message 4</p>
    <p>Message 5</p><p>Message 6</p><p>Message 7</p><p>Message 8</p>
  </div>
</body>
</html>

max-height здесь лучше, чем height: короткий список остается коротким, и прокручивается только длинный. Прокручиваемой области без фокусируемого содержимого внутри стоит задать tabindex="0", чтобы пользователи клавиатуры тоже могли ее прокручивать.

overflow-x и overflow-y

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal scroll</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .table-wrap { overflow-x: auto; border: 1px solid #d1d5db; max-width: 360px; }
    table { border-collapse: collapse; }
    th, td { padding: 8px 12px; white-space: nowrap; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="table-wrap" id="wrap">
    <table>
      <tr><th>Plan</th><th>Monthly</th><th>Yearly</th><th>Users</th><th>Storage</th><th>Support</th></tr>
      <tr><td>Free</td><td>$0</td><td>$0</td><td>1</td><td>1 GB</td><td>Community</td></tr>
      <tr><td>Team</td><td>$12</td><td>$120</td><td>10</td><td>100 GB</td><td>Email</td></tr>
    </table>
  </div>
</body>
</html>

Одно правило стоит запомнить: если одна ось hidden, scroll или auto, значение visible на другой оси превращается в auto. Поэтому один лишь overflow-x: hidden может дать неожиданную вертикальную полосу прокрутки. У overflow-x: clip такого эффекта нет:

.a { overflow-x: hidden; }  /* overflow-y computes to auto */
.b { overflow-x: clip; }    /* overflow-y stays visible */

Обрезка текста с многоточием

text-overflow: ellipsis заменяет обрезанный конец строки на «…». Для этого нужны три вещи вместе: ограниченная ширина, текст, который не может переноситься, и скрытое переполнение:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ellipsis</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .one-line {
      width: 240px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid #d1d5db; padding: 6px;
    }
    .three-lines {
      width: 240px; margin-top: 12px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      border: 1px solid #d1d5db; padding: 6px;
    }
  </style>
</head>
<body>
  <div class="one-line" id="one">A very long file name that will not fit in the box.pdf</div>
  <div class="three-lines" id="three">This paragraph is longer than three lines. Only the first three lines are shown and the end of the third one becomes an ellipsis, which suits card previews and search results.</div>
</body>
</html>

Ограничение строк с префиксом -webkit- работает в Chrome, Firefox и Safari. Программы чтения с экрана все равно читают полный текст, поэтому обрезанные слова для них не теряются.

Побочные эффекты overflow

Значение overflow, отличное от visible и clip, меняет больше, чем обрезку:

Оно вмещает float и отступы дочерних элементов. Элемент образует новый блочный контекст форматирования и растет, обхватывая плавающие дочерние элементы. display: flow-root делает то же без всякой обрезки.
Оно ломает position: sticky у потомков. Липкий дочерний элемент прилипает к ближайшему контейнеру прокрутки; если этот контейнер не прокручивается, ничего не прилипает.
Оно обрезает абсолютно позиционированные дочерние элементы (когда переполняющийся элемент еще и их содержащий блок), включая выпадающие меню и подсказки, а также обрезает тени дочерних элементов.

Как скрыть полосу прокрутки

Можно оставить блок прокручиваемым, но скрыть полосу прокрутки через scrollbar-width: none. Используйте это осторожно: без полосы прокрутки многие читатели не понимают, что содержимого больше. scrollbar-gutter: stable делает обратное: резервирует место под полосу прокрутки, чтобы содержимое не сдвигалось, когда она появляется.

Частые ошибки

Ожидание переполнения без ограничения размера. Блок без height или max-height растет, а не переполняется.
overflow: hidden на body, чтобы «починить» горизонтальную прокрутку. Лучше найдите слишком широкий элемент (часто это фиксированная width, длинный URL или 100vw при наличии полосы прокрутки).
Многоточие без white-space: nowrap. Текст переносится, по горизонтали ничего не переполняется, и многоточие не появляется.
overflow-x: hidden создает вертикальную полосу прокрутки. Используйте clip.
Выпадающее меню обрезано карточкой. Его обрезает overflow: hidden карточки; перенесите правило overflow или отрисуйте меню снаружи.

Часто задаваемые вопросы

Что делает overflow: hidden?

Обрезает содержимое, которое не помещается в область padding элемента, без полос прокрутки. До скрытой части все равно можно прокрутить скриптом или фокусом на элементе внутри.

Чем overflow auto отличается от scroll?

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

Как сделать прокрутку внутри div?

Ограничьте его размер и разрешите прокрутку: max-height: 300px; overflow-y: auto;. Без ограничения высоты или max-height div растет вместе с содержимым и никогда не переполняется.

Почему overflow-x: hidden добавляет еще и вертикальную прокрутку?

Если одна ось hidden, scroll или auto, значение visible на другой оси вычисляется как auto. Используйте overflow-x: clip: он не создает контейнер прокрутки и оставляет другую ось видимой.

Как добавить многоточие (...) к тексту, который не помещается?

Для одной строки: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; у элемента с ограниченной шириной. Для нескольких строк используйте display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.

Связанные концепции