css властивість overflow-x


Властивість overflow-x вказує, що зробити для переповненого по горизонталі елемента:

  • Обрізати вміст, що поза межами елемента, без можливості його перегляду.
  • Відобразити вміст, що поза межами елемента.
  • Обрізати вміст, що поза межами елемента та для можливості перегляду обрізаного тексту, відобразити горизонтальну смугу прокручування.

Властивість `overflow-x`

Для того, щоб побачити результат дії overflow-x, разом з ним для елементу треба прописати також ширину(width або max-width), або задати значення nowrap для white-space.

В стані чорнетки, існують три ключові слова, які можна буде використовувати в якості значень для overflow: no-display, no-content, clip. Ви можете також використовувати властивість overflow для скороченого запису overflow-x i overflow-y.

Нотатка:

Щоб керувати поведінкою елемента, що переповнений по вертикалі використовуйте css властивість overflow-y.

Синтаксис

overflow-y: visible|hidden|scroll|auto|initial|inherit;

Властивість overflow-x може отримувати 6 значень:

visible

Відображає ввесь вміст елемента, навіть вміст, що за межами елемента. Без задання.

hidden

Відображається лише область всередині елемента, все, що поза межами контейнера буде обрізано.

scroll

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

auto

Горизонтальна смуга прокручування з'явиться, тільки при необхідності.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента

Значення без задання: visible
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.overflowX="scroll"

Переглядачі

Переглядач
overflow-x

1.0

5.0

3.5

3.0

9.5

Переглядач
overflow-x

1.0

1.0

3.0


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад

Демонстрація роботи властивості

Приклад використання властивості overflow-x.

Обрізання вмісту в елементі <div>

div {


    overflow-x: hidden;


}


Додаткові посилання