overflow-block

**overflow-block** CSS 属性设置当内容溢出盒子的块级起始和块级结束边缘时显示的内容。这可能是无内容、滚动条或溢出内容。

**注意：**overflow-block 属性映射到 overflow-y 或 overflow-x，具体取决于文档的书写模式。

语法

css
/* Keyword values */
overflow-block: visible;
overflow-block: hidden;
overflow-block: clip;
overflow-block: scroll;
overflow-block: auto;

/* Global values */
overflow-block: inherit;
overflow-block: initial;
overflow-block: revert;
overflow-block: revert-layer;
overflow-block: unset;

overflow-block 属性指定为单个 <overflow> 关键字值

值

visible

内容不会被裁剪，并且可能会渲染在填充盒子的块级起始和块级结束边缘之外。

hidden

如果需要，内容会被裁剪以适合填充盒子的块级尺寸。不提供滚动条。

clip

溢出内容在使用 overflow-clip-margin 属性定义的元素溢出裁剪边缘处被裁剪。

scroll

如果需要，内容会被裁剪以适合填充盒子的块级尺寸。浏览器显示滚动条，无论内容是否实际被裁剪。（这可以防止内容更改时滚动条出现或消失。）打印机可能仍然会打印溢出的内容。

auto

取决于用户代理。如果内容适合填充盒，则其外观与 visible 相同，但仍会建立新的块级格式化上下文。

正式定义

初始值auto
应用于块级容器、弹性容器和网格容器
继承否
计算值按指定值计算，但如果 overflow-x 或 overflow-y 既不是 visible 也不是 clip，则 visible/clip 分别计算为 auto/hidden
动画类型离散

正式语法

overflow-block = 
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

示例

HTML

html
<ul>
  <li>
    <code>overflow-block: hidden</code> (hides the text outside the box)
    <div id="hidden">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block: scroll</code> (always adds a scrollbar)
    <div id="scroll">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block: clip</code> (hides the text outside the box beyond the
    overflow clip edge)
    <div id="clip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block: visible</code> (displays the text outside the box if
    needed)
    <div id="visible">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block: auto</code> (on most browsers, equivalent to
    <code>scroll</code>)
    <div id="auto">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>

CSS

css
div {
  border: 1px solid black;
  width: 250px;
  height: 100px;
  margin-bottom: 120px;
}

#hidden {
  overflow-block: hidden;
}
#scroll {
  overflow-block: scroll;
}
#scroll {
  overflow-block: clip;
}
#visible {
  overflow-block: visible;
}
#auto {
  overflow-block: auto;
}

结果

规范

规范
CSS 溢出模块级别 3
# overflow-control

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅