CSS-свойство `overflow-inline`

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

Синтаксис

/* 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>:

visible

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

hidden

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

clip

Выходящее за границы содержимое обрезается по границе обрезки переполнения элемента, которая задаётся свойством overflow-clip-margin.

scroll

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

auto

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

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

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

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

Результат

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

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

См. также

• clip, display, overflow, overflow-block, overflow-clip-margin, overflow-x, overflow-y, text-overflow, white-space
• Модуль переполнения CSS
• Логические свойства CSS
• Режимы письма CSS
• Изучение: переполнение содержимого