overflow-x

Властивість CSS overflow-x (переливання X) задає те, що виводиться, коли вміст переливається через лівий і правий краї елемента блокового рівня. Це може бути або нічого, або смуга прокручення, або вміст, що переливається. Ця властивість також може бути задана за допомогою властивості-скорочення overflow.

Спробуйте його в дії

Синтаксис

/* Значення – ключові слова */
overflow-x: visible;
overflow-x: hidden;
overflow-x: clip;
overflow-x: scroll;
overflow-x: auto;

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

[!NOTE] Ключове значення overlay є історичним псевдонімом auto. З overlay смуги прокручення малюються поверх вмісту, замість того, щоб займати простір.

Формальне визначення

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

visible | hidden | clip | scroll | auto

Приклади

HTML

<ul>
  <li>
    <code>overflow-x:hidden</code> — приховує текст поза рамкою
    <div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-x:scroll</code> — завжди додає смугу прокручення
    <div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-x:visible</code> — показує текст за межами рамки, якщо це
    необхідно
    <div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-x:auto</code> — у більшості браузерів рівносильно
    <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
• Цеглинки CSS: Вміст, що переливається через край