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

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

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

INFO

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

Initial Value	visible
Applies to	Block-containers, flex containers and grid containers.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.overflowX = "visible";

Синтаксис

CSS overflow-x

css

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

Пример свойства overflow-x:

CSS overflow-x code example

html

<!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>

Try it Yourself »

Результат

CSS overflow-x visible

Пример свойства overflow-x со значением "visible":

html

<!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>

Try it Yourself »

Пример свойства overflow-x со значением "hidden":

html

<!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>

Try it Yourself »

Пример свойства overflow-x со значением "auto":

html

<!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>

Try it Yourself »

Пример свойства overflow-x со всеми значениями:

CSS overflow-x all values example

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>

Try it Yourself »

Значения

Value	Description	Play it
visible	Содержимое не обрезается и отображается за левую и правую границы padding box. Это значение по умолчанию для этого свойства.	Play it »
hidden	Содержимое обрезается, чтобы поместиться по горизонтали в padding box. Полоса прокрутки не добавляется.	Play it »
scroll	Содержимое обрезается, чтобы поместиться по горизонтали в padding box. Полоса прокрутки добавляется, чтобы увидеть остальное содержимое.	Play it »
auto	Содержимое обрезается, чтобы поместиться по горизонтали в padding box. Полоса прокрутки добавляется только если содержимое выходит за пределы.	Play it »
initial	Заставляет свойство использовать значение по умолчанию.	Play it »
inherit	Наследует свойство от родительского элемента.

Practice

Which of the followings is not a value for the overflow-x property ?

visiblehiddenstaticscroll

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

Синтаксис ​

Пример свойства overflow-x: ​

Результат ​

Пример свойства overflow-x со значением "visible": ​

Пример свойства overflow-x со значением "hidden": ​

Пример свойства overflow-x со значением "auto": ​

Пример свойства overflow-x со всеми значениями: ​

Значения ​

Practice ​

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

Синтаксис

Пример свойства overflow-x:

Результат

Пример свойства overflow-x со значением "visible":

Пример свойства overflow-x со значением "hidden":

Пример свойства overflow-x со значением "auto":

Пример свойства overflow-x со всеми значениями:

Значения

Practice