overflow

Baseline 已廣泛支援

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

overflow 是一個 CSS 簡寫屬性，用以設定當內容無法適應元素的內邊距（padding box）（即溢位）時，在水平和/或垂直方向上期望的行為。

試一試

overflow: visible;

overflow: hidden;

overflow: clip;

overflow: scroll;

overflow: auto;

<section class="default-example" id="default-example">
  <p id="example-element">
    Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's
    Inn Hall. Implacable November weather. As much mud in the streets as if the
    waters had but newly retired from the face of the earth.
  </p>
</section>

#example-element {
  width: 15em;
  height: 9em;
  border: medium dotted;
  padding: 0.75em;
  text-align: left;
}

語法

css

/* Keyword values */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

/* Global values */
overflow: inherit;
overflow: initial;
overflow: revert;
overflow: revert-layer;
overflow: unset;

overflow 屬性可指定為一個或兩個 <overflow> 關鍵字值。如果只指定一個關鍵字，那麼 overflow-x 和 overflow-y 都會被設定為相同的值。如果指定了兩個關鍵字，第一個值應用於水平方向的 overflow-x，第二個值則應用於垂直方向的 overflow-y。

值

visible: 溢位的內容不會被裁剪，可能會在元素的內邊距盒之外可見。元素盒不是一個滾動容器。這是 overflow 屬性的預設值。
hidden: 溢位的內容在元素的內邊距盒處被裁剪。沒有捲軸，被裁剪的內容不可見（即內容被隱藏），但內容仍然存在。使用者代理不會新增捲軸，也不允許使用者透過諸如觸控式螢幕拖拽或使用滑鼠滾輪等操作來檢視裁剪區域外的內容。內容可以透過程式設計方式滾動（例如，透過連結到錨文字、透過 Tab 鍵聚焦到隱藏但可聚焦的元素，或者透過設定 scrollLeft 屬性或 scrollTo() 方法的值），在這種情況下，元素盒是一個滾動容器。
clip: 溢位的內容在元素的溢位裁剪邊緣處被裁剪，該邊緣透過 overflow-clip-margin 屬性定義。因此，內容會溢位元素的內邊距盒，溢位的量為 overflow-clip-margin 的 <length> 值，如果未設定則為 0px。裁剪區域外的溢位內容不可見，使用者代理不會新增捲軸，也不支援程式設計方式的滾動。不會建立新的格式化上下文。要建立一個格式化上下文，請將 overflow: clip 與 display: flow-root 一起使用。元素盒不是一個滾動容器。
scroll: 溢位的內容在元素的內邊距盒處被裁剪，並且可以使用捲軸將溢位的內容滾動到檢視中。無論是否有內容溢位，使用者代理都會顯示捲軸，因此如果該值同時應用於水平和垂直方向，那麼兩個方向都會顯示捲軸。因此，使用此關鍵字可以防止捲軸隨著內容變化而出現和消失。印表機可能仍然會列印溢位的內容。元素盒是一個滾動容器。
auto: 溢位的內容在元素的內邊距盒處被裁剪，並且可以使用捲軸將溢位的內容滾動到檢視中。與 scroll 不同，使用者代理僅當內容溢位時才顯示捲軸。如果內容能適應元素的內邊距盒，它的外觀與 visible 相同，但仍然會建立一個新的格式化上下文。元素盒是一個滾動容器。

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

描述

溢位選項包括隱藏溢位內容、啟用捲軸以檢視溢位內容、或顯示內容從元素盒中流出到周圍區域，以及這些選項的組合。

在使用 overflow 的各種關鍵字時，應注意以下細微差別：

為 overflow 指定一個非 visible（預設值）或 clip 的值會建立一個新的塊格式化上下文。這是出於技術原因的需要；如果一個浮動元素與一個滾動元素相交，它會在每次滾動後強制重新包裹內容，從而導致滾動體驗緩慢。
為了使 overflow 設定產生預期效果，塊級元素必須具有：如果溢位發生在垂直方向，則需要設定高度（height 或 max-height）；如果溢位發生在水平方向，則需要設定寬度（width 或 max-width）；如果溢位發生在塊方向，則需要設定塊級尺寸（block-size 或 max-block-size）；或者，如果溢位發生在行內方向，則需要設定行內尺寸（inline-size 或 max-inline-size）或將 white-space 設定為 nowrap。
當一個方向（即 overflow-x 或 overflow-y）的 overflow 設定為 visible，而另一個方向的 overflow 未設定為 visible 或 clip 時，visible 值的行為會像 auto 一樣。
當一個方向的 overflow 設定為 clip，而另一個方向的 overflow 未設定為 visible 或 clip 時，clip 值的行為會像 hidden 一樣。
JavaScript 的 Element.scrollTop 屬性可用於在滾動容器中滾動內容，除非 overflow 被設定為 clip。

正式定義

初始值	`visible`
應用於	塊容器、伸縮容器和網格容器
繼承性	否
計算值	作為簡寫中的每個屬性 `overflow-x`：按指定值計算，但如果 `overflow-x` 或 `overflow-y` 中有一個既不是 `visible` 也不是 `clip`，那麼 `visible`/`clip` 會分別計算為 `auto`/`hidden`。 `overflow-y`：按指定值計算，但如果 `overflow-x` 或 `overflow-y` 中有一個既不是 `visible` 也不是 `clip`，那麼 `visible`/`clip` 會分別計算為 `auto`/`hidden`。
動畫型別	離散

正式語法

overflow = 
  <'overflow-block'>{1,2}  

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

無障礙

滾動內容區域不是鍵盤可聚焦的，因此純鍵盤使用者無法滾動它。Firefox 和 Chrome 132 及更高版本是例外；它們預設使滾動容器可聚焦。

對於其他瀏覽器，要讓純鍵盤使用者能夠滾動容器，你需要使用 tabindex="0" 為容器分配一個 tabindex。不幸的是，當螢幕閱讀器遇到這個製表位時，它可能沒有關於該容器的上下文，並且很可能會讀出容器的全部內容。為了緩解這個問題，請給容器一個適當的 WAI-ARIA 角色（例如 role="region"）和一個無障礙名稱（透過 aria-label 或 aria-labelledby）。

示例

演示各種 overflow 關鍵字的結果

HTML

html

<div>
  <code>visible</code>
  <p class="visible">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>hidden</code>
  <p class="hidden">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>clip</code>
  <p class="clip">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>scroll</code>
  <p class="scroll">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>auto</code>
  <p class="auto">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>overlay</code>
  <p class="overlay">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

div {
  margin: 2em;
  font-size: 1.2em;
}

p {
  width: 5em;
  height: 5em;
  border: dotted;
  margin-top: 0.5em;
}

div:nth-of-type(5),
div:nth-of-type(6) {
  margin-top: 200px;
}

css

p.visible {
  overflow: visible;
}

p.hidden {
  overflow: hidden;
}

p.clip {
  overflow: clip;
  overflow-clip-margin: 1em;
}

p.scroll {
  overflow: scroll;
}

p.auto {
  overflow: auto;
}

p.overlay {
  overflow: overlay;
}

結果

規範

規範
CSS 溢位模組第 3 級 # propdef-overflow
Scalable Vector Graphics (SVG) 2 # OverflowAndClipProperties

瀏覽器相容性

另見

overflow-x, overflow-y
overflow-block、overflow-clip-margin、overflow-inline
clip、display、text-overflow、white-space
SVG overflow 屬性
CSS overflow 模組
adrianroselli.com 上的純鍵盤滾動區域（2022 年）

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025 年 7 月 14 日⁩，由 MDN 貢獻者們共同完成。

在 GitHub 上檢視此頁面 • 報告此內容的問題