overflow-x

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

Попробуйте

Синтаксис

/* 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, но всё ещё создаёт новый контекст форматирования блоков. Настольные браузеры отображают полосы прокрутки, если содержимое выходит за пределы.

Примечание: Ключевое слово overlay является устаревшим псевдонимом для auto. При использовании overlay, полосы прокрутки выводятся поверх содержимого, а не занимают место.

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

Начальное значение	`visible`
Применимо к	Контейнерам блоков, гибким контейнерам и контейнерам сетки
Наследуется	нет
Вычисленное значение	как указано, за исключением `visible`/`clip` вычисления до `auto`/`hidden` соответственно, если одно из `overflow-x` или `overflow-y` не является `visible` или clip
Тип анимации	дискретный

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

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;
}

Результат

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

Спецификация
CSS Overflow Module Level 3 # overflow-properties

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`overflow-x`	1	12	3.5	9.5	3	18	4	14	1	1.0	4.4
`auto`	115	12	3.5112	1515	3≤13.1	18100	4112	1469	2≤13.4	1.019.0	4.4100
`clip`	90	90	813.5–81	76	16	90	814–81	64	16	15.0	90
`hidden`	1	12	3.5	15	3	18	4	14	2	1.0	4.4
`scroll`	1	12	3.5	15	3	18	4	14	2	1.0	4.4
`visible`	1	12	3.5	15	3	18	4	14	2	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x