Свойство CSS overflow-x — значения и примеры

Свойство overflow-x управляет тем, что происходит с содержимым, выходящим за пределы левого и правого краёв блока. Вы можете позволить ему вытекать, обрезать его без уведомления или добавить горизонтальную полосу прокрутки.

overflow-x является частью сокращённого свойства CSS overflow и работает совместно со свойством overflow-y, которое управляет вертикальным переполнением.

Информация

Если для overflow-y установлено значение hidden, scroll или auto, а overflow-x оставлен со значением по умолчанию visible, браузеры автоматически вычисляют overflow-x как auto. Значение visible не может сосуществовать с отличным от visible значением по перпендикулярной оси.

Начальное значение	`visible`
Применяется к	Блочным контейнерам, контейнерам flex и контейнерам grid.
Наследуется	Нет.
Анимируется	Нет.
Версия	CSS3
DOM-синтаксис	`object.style.overflowX = "scroll";`

Синтаксис

overflow-x: visible | hidden | scroll | auto | clip | initial | inherit;

Значения

Значение	Описание
`visible`	Содержимое не обрезается. Оно отображается за пределами левого и правого краёв блока с отступами. Это значение по умолчанию.
`hidden`	Содержимое обрезается по краям блока с отступами. Полоса прокрутки не отображается, и обрезанный контент недоступен.
`scroll`	Содержимое обрезается, и горизонтальная полоса прокрутки всегда отображается, даже если контент помещается.
`auto`	Содержимое обрезается только при переполнении. Полоса прокрутки появляется только при необходимости. Предпочтительнее `scroll` в большинстве случаев.
`clip`	Аналогично `hidden`, но также запрещает программную прокрутку через JavaScript (`scrollLeft`, `scroll()`). Поддерживается современными браузерами.
`initial`	Сбрасывает свойство до значения по умолчанию (`visible`).
`inherit`	Наследует значение от родительского элемента.

Когда использовать каждое значение

visible — значение по умолчанию. Используйте, когда переполнение намеренно, например, для подсказки или выпадающего меню, которые должны выходить за пределы контейнера.
hidden — используйте для скрытия переполнения в дизайн-компонентах (карточки с изображениями, слайдеры), где обрезанный контент никогда не должен быть доступен. Учтите, что любой обрезанный контент недоступен для пользователей клавиатуры и программ чтения с экрана.
scroll — используйте, когда всегда нужна видимая полоса прокрутки, например, в режимах сравнения рядом, чтобы макет не смещался при изменении длины контента.
auto — наиболее распространённый выбор для адаптивных контейнеров. Полоса прокрутки появляется только тогда, когда контент действительно переполняет блок, сохраняя чистоту макета.
clip — используйте, когда нужна такая же жёсткая обрезка, как у hidden, но при этом необходимо запретить JavaScript программно прокручивать элемент (полезно при определённых техниках анимации).

Практические паттерны

Распространённый случай использования — контейнер с горизонтальной прокруткой для широкого контента, например таблиц данных или блоков кода. Сочетайте overflow-x: auto с white-space: nowrap (см. white-space), чтобы сохранить контент в одну строку:

.scroll-container {
  overflow-x: auto;
  white-space: nowrap;
  max-width: 100%;
}

Чтобы работало многоточие text-overflow (…), нужно сочетание overflow-x: hidden (или overflow: hidden) с white-space: nowrap:

.truncate {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Примеры

overflow-x: scroll

Контейнер имеет ширину всего 40 пикселей. При значении scroll горизонтальная полоса прокрутки всегда отображается, чтобы пользователи могли добраться до остального текста.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: scroll</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Попробуйте сами »

overflow-x: visible

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #cccccc;
        width: 40px;
        overflow-x: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: visible</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Попробуйте сами »

overflow-x: hidden

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: hidden</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Попробуйте сами »

overflow-x: auto

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: auto;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: auto</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Попробуйте сами »

Сравнение всех значений

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.scroll {
        background-color: #ccc;
        width: 50px;
        overflow-x: scroll;
      }
      div.hidden {
        background-color: #ccc;
        width: 50px;
        overflow-x: hidden;
      }
      div.auto {
        background-color: #ccc;
        width: 50px;
        overflow-x: auto;
      }
      div.visible {
        background-color: #ccc;
        width: 50px;
        overflow-x: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>overflow-x: scroll</h3>
    <div class="scroll">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: hidden</h3>
    <div class="hidden">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: auto</h3>
    <div class="auto">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: visible</h3>
    <div class="visible">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Попробуйте сами »

Связанные свойства

overflow — сокращённое свойство, задающее одновременно overflow-x и overflow-y.
overflow-y — управляет поведением при вертикальном (верхнем/нижнем) переполнении.
overflow-wrap — определяет, может ли браузер переносить длинные слова для предотвращения горизонтального переполнения.
text-overflow — управляет тем, как пользователю сигнализируется о переполнении текста (например, многоточие).
white-space — определяет, переносится ли текст; сочетание white-space: nowrap с overflow-x является распространённым паттерном.

Практика

Какое значение overflow-x всегда показывает горизонтальную полосу прокрутки, даже если контент помещается?

visibleautoscrollhidden