overflow-block

Baseline 2023

新推出

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

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

注意： overflow-block 属性不决定是否发生溢出；相反，它揭示了设备如何处理此类溢出。通常，在大多数浏览器的屏幕上，其行为将是“scroll”：当内容超出可用垂直空间时，设备允许您滚动以访问溢出的内容。

语法

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

none: 块轴上溢出的内容不会被显示。
scroll: 块轴上溢出的内容可以通过滚动来查看。
optional-paged: 块轴上溢出的内容可以通过滚动来查看，但可以手动触发分页符（例如通过 break-inside 等）使后续内容显示在下一页。
paged: 内容被分成不连续的页面；在块轴上溢出某个页面的内容将显示在下一页上。

示例

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

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

结果

规范

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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面最后修改于 2025年7月14日由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的问题