overflow-inline

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

Новое

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

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

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

Синтаксис

Функция overflow-inline задается как ключевое слово, выбранное из списка ниже.

none: Содержимое, переполняющее ось инлайна, не отображается.
scroll: Содержимое, переполняющее ось инлайна, отображается при прокрутке.

Примеры

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

p {
  white-space: nowrap;
}

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

Результат

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

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

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`overflow-inline`	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-inline