overflow-block
CSS 属性 overflow-block
设置了当内容溢出盒的块首和块末侧时所显示的内容。可以不显示,或者显示滚动条或溢出内容。
备注:overflow-block
属性根据文档的书写模式对应于 overflow-y
或 overflow-x
。
语法
css
/* 关键词值 */
overflow-block: visible;
overflow-block: hidden;
overflow-block: scroll;
overflow-block: auto;
/* 全局值 */
overflow-block: inherit;
overflow-block: initial;
overflow-block: revert;
overflow-block: revert-layer;
overflow-block: unset;
overflow-block
属性可指定为下列关键词之一。
取值
形式定义
初始值 | auto |
---|---|
适用元素 | Block-containers, flex containers, and grid containers |
是否是继承属性 | 否 |
计算值 | as specified, except with visible /clip computing to auto /hidden respectively if one of overflow-x or overflow-y is neither visible nor clip |
动画类型 | 离散值 |
形式语法
示例
HTML
html
<ul>
<li>
<code>overflow-block:hidden</code>——在盒外隐藏文本
<div id="div1">
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>——总是添加滚动条
<div id="div2">
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>——按需在盒外显示文本
<div id="div3">
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>——在多数浏览器上等价于 <code>scroll</code>
<div id="div4">
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
#div1,
#div2,
#div3,
#div4 {
border: 1px solid black;
width: 250px;
height: 100px;
}
#div1 {
overflow-block: hidden;
margin-bottom: 120px;
}
#div2 {
overflow-block: scroll;
margin-bottom: 120px;
}
#div3 {
overflow-block: visible;
margin-bottom: 120px;
}
#div4 {
overflow-block: auto;
margin-bottom: 120px;
}
结果
规范
Specification |
---|
CSS Overflow Module Level 3 # overflow-control |
浏览器兼容性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
overflow-block | ||||||||||||
overlay |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.