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 |
浏览器兼容性
BCD tables only load in the browser