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