css властивість 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.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

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

visible

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

автор: Svitlana

правити

hidden

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

автор: Svitlana

правити

scroll

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

автор: Svitlana

правити

auto

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
overflow-x	1.0	3.5	3.0	9.5	5.0

Підтримка: мобільні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<div>Дуже-довгий-рядок-без-пробілів-який-не-вміщається-по-горизонталі-й-обрізається</div>

div {
    width: 200px;
    overflow-x: hidden;
    white-space: nowrap;
    border: 1px solid #0172ad;
}