overflow-inline
基線 2025 *
新推出
overflow-inline CSS 屬性設定當內容溢位框的行內起始和結束邊緣時顯示的內容。這可能不顯示任何內容、顯示捲軸或溢位內容。
注意： overflow-inline 屬性根據文件的書寫模式對映到 overflow-y 或 overflow-x。
語法
css
/* Keyword values */
overflow-inline: visible;
overflow-inline: hidden;
overflow-inline: clip;
overflow-inline: scroll;
overflow-inline: auto;
/* Global values */
overflow-inline: inherit;
overflow-inline: initial;
overflow-inline: revert;
overflow-inline: revert-layer;
overflow-inline: unset;
overflow-inline 屬性被指定為單個 <overflow> 關鍵字值。
值
visible-
內容不會被裁剪，並且可能會呈現在內邊距框的行內起始和結束邊緣之外。
-
如有必要，內容會被裁剪以適應內邊距框的行內尺寸。不提供捲軸。
clip-
溢位內容在元素的溢位裁剪邊緣被裁剪，該邊緣使用
overflow-clip-margin屬性定義。 scroll-
如有必要，內容會被裁剪以適應內邊距框的行內尺寸。無論內容是否實際被裁剪，瀏覽器都會顯示捲軸。（這可以防止在內容更改時捲軸出現或消失。）印表機仍可能列印溢位內容。
auto-
取決於使用者代理。如果內容適合內邊距框，它看起來與
visible相同，但仍會建立新的塊格式化上下文。如果內容溢位，桌面瀏覽器會提供捲軸。
正式定義
| 初始值 | auto |
|---|---|
| 應用於 | 塊容器、伸縮容器和網格容器 |
| 繼承性 | 否 |
| 計算值 | 按指定方式，但如果 overflow-x 或 overflow-y 中的一個既不是 visible 也不是 clip，則 visible/clip 分別計算為 auto/hidden |
| 動畫型別 | 離散 |
正式語法
overflow-inline =
visible |
hidden |
clip |
scroll |
auto
示例
設定行內溢位行為
HTML
html
<ul>
<li>
<code>overflow-inline: hidden</code> (hides the text outside the box)
<div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: scroll</code> (always adds a scrollbar)
<div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: visible</code> (displays the text outside the box if
needed)
<div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: auto</code> (equivalent to <code>scroll</code>
in most browsers)
<div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: clip</code> (hides the text outside the box beyond
the overflow clip edge)
<code>clip</code>
<div id="div5">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
</ul>
CSS
css
div {
border: 1px solid black;
width: 250px;
margin-bottom: 12px;
}
#div1 {
overflow-inline: hidden;
}
#div2 {
overflow-inline: scroll;
}
#div3 {
overflow-inline: visible;
}
#div4 {
overflow-inline: auto;
}
#div5 {
overflow-inline: clip;
overflow-clip-margin: 2em;
}
結果
規範
| 規範 |
|---|
| CSS 溢位模組第 3 級 # 溢位控制 |
瀏覽器相容性
載入中…