1. Web
  2. CSS
  3. <overflow>

<overflow>

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

<overflow> 列舉值型別表示 overflow-block、overflow-inline、overflow-x 和 overflow-y 簡寫屬性以及 overflow 簡寫屬性的關鍵詞值。這些屬性應用於塊容器、彈性容器和網格容器。

語法

<overflow> = visible | hidden | clip | scroll | auto

值

<overflow> 列舉值型別使用下面列出的值之一來指定。

visible

溢位內容不會被裁剪，並且可能在元素的內邊距框之外可見。元素框不是滾動容器。這是所有具有 <overflow> 列舉值型別的屬性的預設值。

hidden

溢位內容在元素的內邊距框處被裁剪。沒有捲軸，被裁剪的內容不可見（即，被裁剪的內容被隱藏），但內容仍然存在。使用者代理不新增捲軸，也不允許使用者透過諸如在觸控式螢幕上拖動或使用滑鼠滾輪等操作來檢視裁剪區域之外的內容。內容可以透過程式設計方式滾動（例如，透過設定 scrollLeft 屬性的值或 scrollTo() 方法）。內容也可以透過鍵盤互動進行滾動；箭頭鍵可以滾動內容，而透過 Tab 鍵聚焦到隱藏內容中的可聚焦元素可以使聚焦的元素滾動到檢視中。設定此值的元素框是一個滾動容器。

clip

溢位內容在元素的溢位裁剪邊緣處被裁剪，該邊緣使用 overflow-clip-margin 屬性定義。因此，內容超出元素的內邊距框，超出量為 overflow-clip-margin 的 <length> 值，如果未設定則為 0px。裁剪區域之外的溢位內容不可見，使用者代理不新增捲軸，也不支援程式設計滾動。不建立新的格式化上下文。

scroll

溢位內容在元素的內邊距框處被裁剪，並且可以使用捲軸將溢位內容滾動到檢視中。如果只設置一個值，無論是否有任何內容溢位或被裁剪，使用者代理都會在水平和垂直方向上顯示捲軸。因此，使用此關鍵詞值可以防止捲軸在內容變化時出現和消失。印表機仍可能列印溢位內容。設定此值的元素框是一個滾動容器。

auto

溢位內容在元素的內邊距框處被裁剪，並且溢位內容可以滾動到檢視中。與 scroll 不同，使用者代理僅在內容溢位時顯示捲軸，並預設隱藏捲軸。如果內容適合元素的內邊距框，它看起來與 visible 相同，但仍會建立新的格式化上下文。設定此值的元素框是一個滾動容器。

備註： 關鍵字值 overlay 是 auto 的一箇舊版別名。使用 overlay 時，捲軸會繪製在內容之上，而不是佔用空間。

示例

此示例演示了 overflow 屬性的所有 <overflow> 列舉值。

HTML

此示例中的 HTML 包含 <pre> 元素中的一些歌詞。HTML 還包含一個連結文字，用於測試鍵盤焦點對溢位和滾動行為的影響。相同的 HTML 程式碼重複多次，以顯示每個 <overflow> 列舉值的影響。

html
<pre>&nbsp;
Oh, Rubber Duckie, you're the one
You make bath time lots of fun
Rubber Duckie, I'm awfully fond of you

Rubber Duckie, joy of joys
When I squeeze you, you make noise
Rubber Duckie, you're my very best friend, it's true

Oh, every day when I make my way to the tubby
I find a little fella who's cute and yellow and chubby
Rub-a-dub-dubby

<a href="#">Rubber Duckie</a>, you're so fine
And I'm lucky that you're mine
Rubber Duckie, I'm awfully fond of you
</pre>

CSS

為了演示目的，<pre> 元素框的大小已定義，以確保內容在行內和塊方向上都溢位其容器。為每個重複的 <pre> 元素設定不同的 <overflow> 值。對於 clip 值的演示，已新增 overflow-clip-margin。

css
pre {
  block-size: 100px;
  inline-size: 295px;
}

pre:nth-of-type(1) {
  overflow: hidden;
}
pre:nth-of-type(1)::before {
  content: "hidden: ";
}

pre:nth-of-type(2) {
  overflow: clip;
  overflow-clip-margin: 1em;
}
pre:nth-of-type(2)::before {
  content: "clip: ";
}

pre:nth-of-type(3) {
  overflow: scroll;
}
pre:nth-of-type(3)::before {
  content: "scroll: ";
}

pre:nth-of-type(4) {
  overflow: auto;
}
pre:nth-of-type(4)::before {
  content: "auto: ";
}

pre:nth-of-type(5) {
  overflow: clip;
  overflow: overlay;
  overflow-clip-margin: 3em;
}
pre:nth-of-type(5)::before {
  content: "overlay (or clip if not supported): ";
}

pre:nth-of-type(6) {
  overflow: visible;
}
pre:nth-of-type(6)::before {
  content: "visible: ";
}

結果

要檢視鍵盤焦點對溢位和滾動行為的影響，請嘗試透過 Tab 鍵遍歷示例中的所有連結。請注意，clip 框不會建立滾動容器，並且當連結獲得焦點時，連結不會進入檢視。visible 值始終使連結在檢視中，也不是滾動容器。

規範

規範
CSS 溢位模組第 3 級
# propdef-overflow

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者在 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.