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

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

Попробуйте

overflow-x: visible;

overflow-x: hidden;

overflow-x: clip;

overflow-x: scroll;

overflow-x: auto;

<section class="default-example" id="default-example">
  <div id="example-element">
    The value of Pi is 3.1415926535897932384626433832795029. The value of e is
    2.7182818284590452353602874713526625.
  </div>
</section>

#example-element {
  width: 15em;
  height: 9em;
  border: medium dotted;
  padding: 0.75em;
  text-align: left;
}

Синтаксис

/* Keyword values */
overflow-x: visible;
overflow-x: hidden;
overflow-x: clip;
overflow-x: scroll;
overflow-x: auto;

/* Global values */
overflow-x: inherit;
overflow-x: initial;
overflow-x: revert;
overflow-x: revert-layer;
overflow-x: unset;

Свойство overflow-x задаётся одним ключевым словом из <overflow>.

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

Значения

visible

Содержимое не обрезается и может отображаться за пределами внутреннего поля элемента у левой и правой границ. Блок элемента не является контейнером прокрутки.

hidden

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

clip

Содержимое обрезается по границе обрезки переполнения элемента, которая задаётся с помощью свойства overflow-clip-margin. В результате содержимое выходит за внутреннее поле элемента на значение <length> свойства overflow-clip-margin или на 0px, если оно не задано. Разница между clip и hidden заключается в том, что ключевое слово clip также запрещает любую прокрутку, включая программную. Новый контекст форматирования не создаётся. Чтобы создать контекст форматирования, используйте overflow: clip вместе с display: flow-root. Блок элемента не является контейнером прокрутки.

scroll

При необходимости содержимое обрезается по горизонтали, чтобы поместиться во внутреннем поле элемента. Браузеры отображают полосы прокрутки по горизонтали независимо от того, обрезается ли содержимое. (Это предотвращает появление или исчезновение полос прокрутки при изменении содержимого.) Принтеры могут по-прежнему печатать выходящее за границы содержимое.

auto

Содержимое обрезается по внутреннему полю элемента, и его можно прокрутить, чтобы оно стало видимым. В отличие от scroll, пользовательские агенты отображают полосы прокрутки только если содержимое выходит за границы, и по умолчанию скрывают полосы прокрутки. Если содержимое помещается во внутреннем поле элемента, это выглядит так же, как при значении visible, но при этом создаётся новый блочный контекст форматирования. Настольные браузеры отображают полосы прокрутки, если содержимое выходит за границы.

Формальное определение

Формальный синтаксис

overflow-x = 
  visible |
  hidden |
  clip |
  scroll |
  auto

Примеры

HTML

<ul>
  <li>
    <code>overflow-x:hidden</code> — hides the text outside the box
    <div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-x:scroll</code> — always adds a scrollbar
    <div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-x:visible</code> — displays the text outside the box if
    needed
    <div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-x:auto</code> — on most browsers, equivalent to
    <code>scroll</code>
    <div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>
</ul>

CSS

#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width: 250px;
  margin-bottom: 12px;
}

#div1 {
  overflow-x: hidden;
}
#div2 {
  overflow-x: scroll;
}
#div3 {
  overflow-x: visible;
}
#div4 {
  overflow-x: auto;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• clip, display, text-overflow, white-space
• Модуль переполнения CSS
• Узнайте: содержимое, выходящее за границы