overflow

範例（Examples）

顯示溢出的內容（Showing content that overflows）

使用 overflow-visible 通用類別來防止元素內的內容被裁切：

Andrew AlfredTechnical advisor

<div class="overflow-visible ...">  <!-- ... --></div>

請注意，任何溢出元素邊界的內容都會是可見的。

隱藏溢出的內容（Hiding content that overflows）

使用 overflow-hidden 通用類別來裁切元素內任何溢出該元素邊界的內容：

Andrew AlfredTechnical advisor

<div class="overflow-hidden ...">  <!-- ... --></div>

需要時捲動（Scrolling if needed）

使用 overflow-auto 通用類別在元素內容溢出該元素邊界時為其新增捲軸：

垂直捲動

Andrew AlfredTechnical advisor

Debra HoustonAnalyst

Jane WhiteDirector, Marketing

Ray FlintTechnical Advisor

<div class="overflow-auto ...">  <!-- ... --></div>

與總是顯示捲軸的 overflow-scroll 不同，此通用類別只會在需要捲動時才顯示捲軸。

需要時水平捲動（Scrolling horizontally if needed）

使用 overflow-x-auto 通用類別在需要時允許水平捲動：

水平捲動

Andrew

Emily

Whitney

David

Kristin

Sarah

<div class="overflow-x-auto ...">  <!-- ... --></div>

需要時垂直捲動（Scrolling vertically if needed）

使用 overflow-y-auto 通用類別在需要時允許垂直捲動：

垂直捲動

Andrew AlfredTechnical advisor

Debra HoustonAnalyst

Jane WhiteDirector, Marketing

Ray FlintTechnical Advisor

<div class="h-32 overflow-y-auto ...">  <!-- ... --></div>

始終水平捲動（Scrolling horizontally always）

使用 overflow-x-scroll 通用類別允許水平捲動並始終顯示捲軸，除非作業系統停用了始終顯示捲軸的功能：

水平捲動

Andrew

Emily

Whitney

David

Kristin

Sarah

<div class="overflow-x-scroll ...">  <!-- ... --></div>

始終垂直捲動（Scrolling vertically always）

使用 overflow-y-scroll 通用類別允許垂直捲動並始終顯示捲軸，除非作業系統停用了始終顯示捲軸的功能：

垂直捲動

Andrew AlfredTechnical advisor

Debra HoustonAnalyst

Jane WhiteDirector, Marketing

Ray FlintTechnical Advisor

<div class="overflow-y-scroll ...">  <!-- ... --></div>

所有方向捲動（Scrolling in all directions）

使用 overflow-scroll 通用類別為元素新增捲軸：

<div class="overflow-scroll ...">  <!-- ... --></div>

與只在必要時才顯示捲軸的 overflow-auto 不同，此通用類別始終顯示捲軸。請注意，某些作業系統（如 macOS）無論此設定如何都會隱藏不必要的捲軸。

響應式設計（Responsive design）

在 overflow 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

<div class="overflow-auto md:overflow-scroll ...">  <!-- ... --></div>

在變體文件中了解更多關於使用變體的資訊。