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 級 # 溢位控制 |
瀏覽器相容性
載入中…