overflow-inline

Baseline 2023
新推出

自 2023 年 9 月起,此功能可在最新的设备和浏览器版本上使用。此功能可能无法在较旧的设备或浏览器上使用。

overflow-inline CSS 媒体特性可用于测试输出设备如何处理内容沿内联轴超出初始包含块的情况。

注意: overflow-inline 属性不决定是否发生溢出;它揭示了设备如何处理这种溢出。通常,在大多数浏览器的屏幕上,行为将是“滚动”:当内容超出可用水平空间时,设备允许您滚动以访问溢出的内容。

语法

overflow-inline 特性被指定为从下面列表中选择的关键字值。

none

超出内联轴的内容不显示。

scroll

超出内联轴的内容可以通过滚动来查看。

示例

HTML

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

css
p {
  white-space: nowrap;
}

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

结果

规范

规范
媒体查询第 4 级
# mf-overflow-inline

浏览器兼容性