試一試
overflow-x: visible;
overflow-x: hidden;
overflow-x: clip;
overflow-x: scroll;
overflow-x: auto;
<section class="default-example" id="default-example">
<div id="example-element">
The value of Pi is 3.1415926535897932384626433832795029. The value of e is
2.7182818284590452353602874713526625.
</div>
</section>
#example-element {
width: 15em;
height: 9em;
border: medium dotted;
padding: 0.75em;
text-align: left;
}
語法
css
/* Keyword values */
overflow-x: visible;
overflow-x: hidden;
overflow-x: clip;
overflow-x: scroll;
overflow-x: auto;
/* Global values */
overflow-x: inherit;
overflow-x: initial;
overflow-x: revert;
overflow-x: revert-layer;
overflow-x: unset;
overflow-x 屬性指定為單個 <overflow> 關鍵詞值。
如果 overflow-y 為 hidden、scroll 或 auto，並且 overflow-x 屬性為 visible（預設值），則該值將隱式計算為 auto。
值
visible-
溢位內容不會被剪裁，並且可能在元素的左右內邊距框之外可見。元素框不是滾動容器。
-
如果需要，溢位內容會被剪裁以水平適應元素的內邊距框。不提供捲軸。
clip-
溢位內容在元素的溢位剪裁邊緣被剪裁，該邊緣使用
overflow-clip-margin屬性定義。因此，內容會溢位元素的內邊距框，溢位量為overflow-clip-margin的<length>值，如果未設定則為0px。clip和hidden之間的區別在於，clip關鍵詞也禁止所有滾動，包括程式化滾動。不會建立新的格式化上下文。要建立格式化上下文，請將overflow: clip與display: flow-root一起使用。元素框不是滾動容器。 scroll-
如果需要，溢位內容會被剪裁以水平適應元素的內邊距框。無論內容是否實際被剪裁，瀏覽器都會在水平方向顯示捲軸。（這可以防止捲軸在內容更改時出現或消失。）印表機仍然可以列印溢位內容。
auto-
溢位內容在元素的內邊距框處被剪裁，溢位內容可以滾動到檢視中。與
scroll不同，使用者代理僅在內容溢位時顯示捲軸，並預設隱藏捲軸。如果內容適合元素的內邊距框，它看起來與visible相同，但仍會建立新的塊格式化上下文。如果內容溢位，桌面瀏覽器會提供捲軸。
備註： 關鍵字值 overlay 是 auto 的一箇舊版別名。使用 overlay 時，捲軸會繪製在內容之上，而不是佔用空間。
正式定義
| 初始值 | visible |
|---|---|
| 應用於 | 塊容器、伸縮容器和網格容器 |
| 繼承性 | 否 |
| 計算值 | 如指定，但如果 overflow-x 或 overflow-y 之一既不是 visible 也不是 clip，則 visible/clip 分別計算為 auto/hidden |
| 動畫型別 | 離散 |
正式語法
overflow-x =
visible |
hidden |
clip |
scroll |
auto
示例
HTML
html
<ul>
<li>
<code>overflow-x:hidden</code> — hides the text outside the box
<div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-x:scroll</code> — always adds a scrollbar
<div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-x:visible</code> — displays the text outside the box if
needed
<div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-x:auto</code> — on most browsers, equivalent to
<code>scroll</code>
<div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
</ul>
CSS
css
#div1,
#div2,
#div3,
#div4 {
border: 1px solid black;
width: 250px;
margin-bottom: 12px;
}
#div1 {
overflow-x: hidden;
}
#div2 {
overflow-x: scroll;
}
#div3 {
overflow-x: visible;
}
#div4 {
overflow-x: auto;
}
結果
規範
| 規範 |
|---|
| CSS 溢位模組第 3 級 # overflow-properties |
瀏覽器相容性
載入中…