CSS overflow

overflow 屬性用來控制當內容超出容器時該如何處理，例如顯示捲軸、隱藏或裁切。

overflow 值

visible（預設）

內容不會被裁切，會溢出容器顯示。

.box {
  overflow: visible;
  width: 200px;
  height: 100px;
}

hidden

超出容器的內容會被隱藏（裁切）。

.box {
  overflow: hidden;
}

scroll

無論內容是否超出，都顯示捲軸。

.box {
  overflow: scroll;
}

auto

只在內容超出時才顯示捲軸。

.box {
  overflow: auto;
}

分別設定水平和垂直

overflow-x 和 overflow-y

.box {
  overflow-x: hidden;    /* 水平方向隱藏 */
  overflow-y: scroll;    /* 垂直方向捲動 */
}

overflow 縮寫

.box {
  overflow: hidden scroll;    /* x y */
}

實用範例

固定高度容器

.content-box {
  height: 300px;
  overflow-y: auto;    /* 內容超出時顯示垂直捲軸 */
}

水平滾動容器

.horizontal-scroll {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.horizontal-scroll > * {
  display: inline-block;
}

隱藏溢出的圓角內容

.card {
  border-radius: 12px;
  overflow: hidden;    /* 確保內容不會超出圓角 */
}

單行文字省略

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行文字省略

.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

彈窗/對話框的內容區

.modal-body {
  max-height: 60vh;
  overflow-y: auto;
}

側邊選單

.sidebar {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

表格容器

.table-container {
  max-width: 100%;
  overflow-x: auto;
}

overflow 的其他用途

清除浮動

overflow: hidden 或 overflow: auto 可以清除浮動：

.container {
  overflow: hidden;    /* 包含浮動的子元素 */
}

建立 BFC (Block Formatting Context)

overflow 不是 visible 的元素會建立新的 BFC，防止 margin collapse：

.wrapper {
  overflow: auto;    /* 建立 BFC */
}

overflow: clip

overflow: clip 類似 hidden，但不會建立新的格式化上下文：

.box {
  overflow: clip;
  overflow-clip-margin: 20px;    /* 允許超出 20px */
}

自訂捲軸樣式

Webkit 瀏覽器（Chrome、Safari、Edge）

.scrollable {
  overflow-y: auto;
}

/* 捲軸整體 */
.scrollable::-webkit-scrollbar {
  width: 8px;
}

/* 捲軸軌道 */
.scrollable::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* 捲軸滑塊 */
.scrollable::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.scrollable::-webkit-scrollbar-thumb:hover {
  background: #555;
}

隱藏捲軸但保留捲動功能

.hide-scrollbar {
  overflow-y: auto;
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE, Edge */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;                   /* Chrome, Safari */
}

常見問題

意外的捲軸

如果容器出現不想要的捲軸：

1. 檢查內容是否真的超出
2. 檢查子元素是否有 margin 導致溢出
3. 考慮使用 overflow: hidden 或調整內容

捲動卡頓

在行動裝置上加上平滑捲動：

.scrollable {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;    /* iOS 平滑捲動 */
}