CSS 布局 - 溢出

CSS overflow 屬性控制對太大而區域無法容納的內容的處理方式。

該文本非常長，其容器的高度僅為100像素。因此，添加了滾動條以幫助讀者滾動內容。 該文本非常長，其容器的高度僅為100像素。因此，添加了滾動條以幫助讀者滾動內容。 該文本非常長，其容器的高度僅為100像素。因此，添加了滾動條以幫助讀者滾動內容。 該文本非常長，其容器的高度僅為100像素。因此，添加了滾動條以幫助讀者滾動內容。 該文本非常長，其容器的高度僅為100像素。因此，添加了滾動條以幫助讀者滾動內容。 該文本非常長，其容器的高度僅為100像素。因此，添加了滾動條以幫助讀者滾動內容。 該文本非常長，其容器的高度僅為100像素。因此，添加了滾動條以幫助讀者滾動內容。 該文本非常長，其容器的高度僅為100像素。因此，添加了滾動條以幫助讀者滾動內容。 該文本非常長，其容器的高度僅為100像素。因此，添加了滾動條以幫助讀者滾動內容。 該文本非常長，其容器的高度僅為100像素。因此，添加了滾動條以幫助讀者滾動內容。 該文本非常長，其容器的高度僅為100像素。因此，添加了滾動條以幫助讀者滾動內容。

親自試一試

CSS Overflow

overflow 屬性指定在元素的內容太大而無法放入指定區域時是剪裁內容還是添加滾動條。

overflow 屬性可設置以下值：

  • visible - 默認。溢出沒有被剪裁。內容在元素框外渲染
  • hidden - 溢出被剪裁，其余內容將不可見
  • scroll - 溢出被剪裁，同時添加滾動條以查看其余內容
  • auto - 與 scroll 類似，但僅在必要時添加滾動條

注釋：overflow 屬性僅適用于具有指定高度的塊元素。

注釋：在 OS X Lion（在 Mac 上）中，滾動條默認情況下是隱藏的，并且僅在使用時顯示（即使設置了 "overflow:scroll"）。

overflow: visible

默認情況下，溢出是可見的(visible)，這意味著它不會被裁剪，而是在元素框外渲染：

當您希望更好地控制布局時，可以使用 overflow 屬性。overflow 屬性指定如果內容溢出元素框會發生什么。

實例

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

親自試一試

overflow: hidden

如果使用 hidden 值，溢出會被裁剪，其余內容被隱藏：

當您希望更好地控制布局時，可以使用 overflow 屬性。overflow 屬性指定如果內容溢出元素框會發生什么。

實例

div {
  overflow: hidden;
}

親自試一試

overflow: scroll

如果將值設置為 scroll，溢出將被裁剪，并添加滾動條以便在框內滾動。請注意，這將在水平和垂直方向上添加一個滾動條（即使您不需要它）：

當您希望更好地控制布局時，可以使用 overflow 屬性。overflow 屬性指定如果內容溢出元素框會發生什么。

實例

div {
  overflow: scroll;
}

親自試一試

overflow: auto

auto 值類似于 scroll，但是它僅在必要時添加滾動條：

當您希望更好地控制布局時，可以使用 overflow 屬性。overflow 屬性指定如果內容溢出元素框會發生什么。

實例

div {
  overflow: auto;
}

親自試一試

overflow-x 和 overflow-y

overflow-x 和 overflow-y 屬性規定是僅水平還是垂直地（或同時）更改內容的溢出：

  • overflow-x 指定如何處理內容的左/右邊緣。
  • overflow-y 指定如何處理內容的上/下邊緣。
當您希望更好地控制布局時，可以使用 overflow 屬性。overflow 屬性指定如果內容溢出元素框會發生什么。

實例

div {
  overflow-x: hidden; /* 隱藏水平滾動欄 */
  overflow-y: scroll; /* 添加垂直滾動欄 */
}

親自試一試

所有 CSS Overflow 屬性

屬性 描述
overflow 規定如果內容溢出元素框會發生什么情況。
overflow-x 規定在元素的內容區域溢出時如何處理內容的左/右邊緣。
overflow-y 指定在元素的內容區域溢出時如何處理內容的上/下邊緣。