overflow-inline

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

Примечание: Свойство overflow-inline отображается как overflow-y или overflow-x в зависимости от направления текста в документе.

Синтаксис

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

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

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

Значения

visible: Содержимое не обрезается и может отображаться за пределами области отступа блока по горизонтали.
hidden: Содержимое обрезается при необходимости, чтобы поместиться в область отступа блока. Полосы прокрутки не отображаются.
clip: Переполняющееся содержимое обрезается по краю элемента, определяемому свойством overflow-clip-margin.
scroll: Содержимое обрезается при необходимости, чтобы поместиться в область отступа блока. Браузеры отображают полосы прокрутки независимо от того, обрезается ли содержимое на самом деле. (Это предотвращает появление или исчезновение полос прокрутки при изменении содержимого.) Принтеры всё равно могут печатать переполняющееся содержимое.
auto: Зависит от пользовательского агента. Если содержимое помещается в область отступа блока, оно выглядит так же, как visible, но всё равно создаёт новый контекст форматирования блоков. Браузеры настольных компьютеров отображают полосы прокрутки, если содержимое выходит за пределы области.

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

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

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

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

Примеры

Настройка поведения переполнения по горизонтали

HTML

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

  <li>
    <code>overflow-inline: scroll</code> (always adds a scrollbar)
    <div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

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

  <li>
    <code>overflow-inline: auto</code> (equivalent to <code>scroll</code>
    in most browsers)
    <div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: clip</code> (hides the text outside the box beyond
    the overflow clip edge)
    <code>clip</code>
    <div id="div5">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>
</ul>

CSS

div {
  border: 1px solid black;
  width: 250px;
  margin-bottom: 12px;
}

#div1 {
  overflow-inline: hidden;
}
#div2 {
  overflow-inline: scroll;
}
#div3 {
  overflow-inline: visible;
}
#div4 {
  overflow-inline: auto;
}
#div5 {
  overflow-inline: clip;
  overflow-clip-margin: 2em;
}

Результат

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`overflow-inline`	Нет	Нет	69	Нет	Нет	Нет	79	Нет	Нет	Нет	Нет
`overlay`	Нет	Нет	112	Нет	Нет	Нет	112	Нет	Нет	Нет	Нет

См. также

© 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-inline