Медиафункция CSS `overflow-block`

Базовая поддержка Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с сентября 2023 года.

Медиафункцию CSS overflow-block можно использовать для проверки того, как устройство вывода обрабатывает содержимое, переполняющее исходный блок-ограничитель вдоль блочной оси.

Примечание: Свойство overflow-block не определяет, происходит ли переполнение; оно показывает, как устройство обрабатывает такое переполнение. Обычно на экранах в большинстве браузеров используется поведение «прокрутка»: когда содержимое превышает доступное вертикальное пространство, устройство позволяет прокручивать страницу, чтобы получить доступ к скрытому содержимому.

Синтаксис

Для функции overflow-block указывается ключевое слово из списка ниже.

none: Содержимое, выходящее за пределы блочной оси, не отображается.
scroll: Содержимое, выходящее за пределы блочной оси, можно просмотреть, прокрутив страницу.
optional-paged: Содержимое, выходящее за пределы блочной оси, можно просмотреть, прокрутив страницу, но разрывы страниц можно задать вручную (например, с помощью break-inside и т. д.), чтобы следующее содержимое отображалось на следующей странице.
paged: Содержимое разбивается на отдельные страницы; содержимое, выходящее за пределы одной страницы вдоль блочной оси, отображается на следующей странице.

Примеры

HTML

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis
  eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in
  faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat,
  tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet
  rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis
  dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend.
  Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt
  sed eget ex.
</p>

CSS

@media (overflow-block: scroll) {
  p {
    color: red;
  }
}

Результат

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

Спецификация
Media Queries Level 4 # mf-overflow-block

Совместимость с браузерами

	Настольные устройства					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`overflow-block`	113	113	66	99	17	113	66	76	17	23.0	113	17

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/overflow-block