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	Значение элемента наследуется от родительского элемента.