Атрибут overflow-x в CSS

9 червня 2022 р.900

Зміст

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

Коротка інформація

Значення за замовчуванням	visible
Успадковується	Ні
Застосовується	До блоків ним елементам
Анімується	Ні

Синтаксис

 <code>overflow-x: auto | hidden | scroll | visible

Позначення

	Опис	Приклад
<тип>	Вказує тип значення.	<розмір>
A && B	Значення повинні виводитися в зазначеному порядку.	<розмір> && <колір>
A \| B	Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B).	normal \| small-caps
A \|\| B	Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку.	width \|\| count
[ ]	Групує значення.	[ crop \|\| cross ]
*	Повторювати нуль або більше разів.	[,<час>]*
+	Повторювати один або більше разів.	<число>+
?	Вказаний тип, слово або група не є обов'язковим.	inset?
{A, B}	Повторювати не менше A, але не більше B разів.	<радіус>{1,4}
#	Повторювати один або більше разів через кому.	<час>#

Значення

visible: Відображається весь вміст елемента, навіть за межами встановленої ширини.
hidden: Відображається лише область всередині елемента, решта буде прихована.
scroll: Завжди додається горизонту смуга прокручування.
auto: Горизонтальна смуга прокручування додається лише за необхідності.

Пісочниця

 Вінні-Пух був завжди не проти трохи підкріпитися, особливо годин об одинадцятій ранку, тому що в цей час сніданок вже давно закінчився, а обід ще й не думав починатися, і, звичайно, він страшенно зрадів, побачивши, що Кролик дістає чашки та тарілки.

-12-tablet is-6-desktop playground-values"> auto hidden scroll visible

div { white-space: pre; overflow-x: <span class="playground-active">{{ playgroun dValue }}</span>; }

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow-x</title> <style> .layer { overflow-x: scroll; /* Додаємо смугу прокручування */
width: 300px; /* Ширина блоку */
height: 150px; /* Висота блоку */
padding: 5px; /* Поля навколо тексту */
border: solid 1px black; /* Параметри рамки */
white-space: nowrap; /* Забороняємо перенесення рядків */
}
</style>
</head>
<body> <div class="layer"> <h2>Гетрогенний блакитний гель</h2> <p>Кондуктометрія м'яко передає електронний спосіб отримання незалежно від наслідків проникнення метилкарбіолу всередину.
</p>
</div>
</body>
</html>

Результат цього прикладу показаний на рис. 1.

Застосування якості overflow-x

Мал. 1. Застосування властивості overflow-x

Об'єктна модель

Об'єкт.style.overflowX

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

Специфікація	Статус
CSS Overflow Module Level 3	Робочий проект

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

Кожна специфікація проходить н кілька стадій схвалення.

Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери


5	12	1	9.5	3	3.5


1	1	10	3

Браузери

В таблиці браузерів застосовуються такі позначення.

— властивість повністю підтримується браузером з усіма допустимими значеннями;
— властивість браузером не сприймається та ігнорується;
— при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, зазначених у специфікації.

Кількість вказує версію браузера, починаючи з якої властивість підтримується.

"field field-name-field-css-cat field-type-taxonomy-term-reference field-label-hidden">

Форматування

Атрибут overflow-x в CSS

Синтаксис

Позначення

Значення

Пісочниця

Приклад

Об'єктна модель

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

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

Браузери

Браузери

Див. також

Автор та редактори