overflow-block

Базовая линия 2023

Новое

С сентября 2023 года эта функция работает на последних устройствах и версиях браузеров. Возможно, эта функция не будет работать на более старых устройствах или браузерах.

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

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

Синтаксис

Функция 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
`overflow-block`	113	113	66	99	17	113	66	76	17	23.0	113

См. также

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