CSS свойство overflow-x

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

войство overflow-x имеет четыре значения - visible, hidden, scroll, auto.

Значение по умолчанию visible
Применяется К блочным контейнерам, флекс- и грид-контейнерам.
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.overflowX = "visible";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div.example {
      background-color: #1c87c9;
      color: #fff;
      width: 40px;
      overflow-x: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства overflow-x</h2>
    <h3>Overflow-x: scroll</h3>
    <div class="example">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div>
  </body>
</html>

Пример со значением "visible":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div.example {
      background-color: #1c87c9;
      color: #fff;
      width: 40px;
      overflow-x: visible;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства overflow-x</h2>
    <h3>Overflow-x: visible</h3>
    <div class="example">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div>
  </body>
</html>

Пример со значением "hidden":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div.example {
      background-color: #1c87c9;
      color: #fff;
      width: 40px;
      overflow-x: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства overflow-x</h2>
    <h3>Overflow-x: hidden</h3>
    <div class="example">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div>
  </body>
</html>

Пример со значением "auto":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div.example {
      background-color: #1c87c9;
      color: #fff;
      width: 40px;
      overflow-x: auto;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства overflow-x</h2>
    <h3>Overflow-x: auto</h3>
    <div class="example">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div>
  </body>
</html>

Пример со всеми значениями:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div.scroll {
      background-color: #ccc;
      width: 50px;
      overflow-x: scroll;
      }
      div.hidden {
      background-color: #ccc;
      width: 50px;
      overflow: hidden;
      }
      div.auto {
      background-color: #ccc;
      width: 50px;
      overflow: auto;
      }
      div.visible {
      background-color: #ccc;
      width: 50px;
      overflow: visible;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства overflow-x</h2>
    <h3>overflow-x: scroll</h3>
    <div class="scroll">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div>
    <h3>overflow-x: hidden</h3>
    <div class="hidden">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div>
    <h3>overflow-x: auto</h3>
    <div class="auto">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div>
    <h3>overflow-x: visible</h3>
    <div class="visible">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div>
  </body>
</html>

Значения

Значение Описание
visible Контент не срезается и отображается та часть, которая выходит за границы слева или справа от блока. Значение по умолчанию.
hidden Контент срезается таким образом, чтобы поместиться внутри блока по горизонтали. Полоса прокрутки не добавляется.
scroll Контент срезается таким образом, чтобы поместиться внутри блока по горизонтали. Полоса прокрутки добавляется, чтобы увидеть оставшуюся часть контента.
auto Контент срезается таким образом, чтобы поместиться внутри блока по горизонтали. Зависит от браузера. Если контент выходит за границы, добавляется полоса прокрутки.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
1.0+ 12.0+ 3.5+ 3.0+ 9.5+

Практикуйте свои знания

Что такое CSS свойство 'overflow-x'?
Считаете ли это полезным?