overflow-block
基线 2025 *
新推出
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-
内容不会被裁剪，并且可能会在内边距框的块起始和块结束边缘之外渲染。
-
如果内容需要适应内边距框的块维度，则会被裁剪。不提供滚动条。
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;
}
#clip {
overflow-block: clip;
}
#visible {
overflow-block: visible;
}
#auto {
overflow-block: auto;
}
结果
规范
| 规范 |
|---|
| CSS 溢出模块第 3 级 # 溢出控制 |
浏览器兼容性
加载中…