版面配置
溢位
用於控制元素如何處理對於容器來說過大的內容的工具。
| 類別 | 樣式 |
|---|---|
overflow-auto | overflow: auto; |
overflow-hidden | overflow: hidden; |
overflow-clip | overflow: clip; |
overflow-visible | overflow: visible; |
overflow-scroll | overflow: scroll; |
overflow-x-auto | overflow-x: auto; |
overflow-y-auto | overflow-y: auto; |
overflow-x-hidden | overflow-x: hidden; |
overflow-y-hidden | overflow-y: hidden; |
overflow-x-clip | overflow-x: clip; |
overflow-y-clip | overflow-y: clip; |
overflow-x-visible | overflow-x: visible; |
overflow-y-visible | overflow-y: visible; |
overflow-x-scroll | overflow-x: scroll; |
overflow-y-scroll | overflow-y: scroll; |
範例
顯示溢位的內容
使用 overflow-visible 實用工具來防止元素內的內容被剪裁
安德魯·艾爾弗雷德技術顧問
<div class="overflow-visible ..."> <!-- ... --></div>請注意，任何溢出元素邊界的內容都會顯示出來。
隱藏溢位的內容
使用 overflow-hidden 實用工具來剪裁元素內任何溢出該元素邊界的內容
安德魯·艾爾弗雷德技術顧問
<div class="overflow-hidden ..."> <!-- ... --></div>如果需要則捲動
使用 overflow-auto 實用工具，在內容溢出元素邊界時，為元素新增捲軸
垂直捲動
安德魯·艾爾弗雷德技術顧問
黛布拉·休斯頓分析師
珍·懷特行銷總監
雷·弗林特技術顧問
<div class="overflow-auto ..."> <!-- ... --></div>與總是顯示捲軸的 overflow-scroll 不同，此實用工具僅在需要捲動時才會顯示捲軸。
如果需要則水平捲動
使用 overflow-x-auto 實用工具，允許在需要時水平捲動
水平捲動
Andrew
Emily
Whitney
David
Kristin
Sarah<div class="overflow-x-auto ..."> <!-- ... --></div>需要時垂直捲動
使用 overflow-y-auto 工具類別，以便在需要時允許垂直捲動
垂直捲動
安德魯·艾爾弗雷德技術顧問
黛布拉·休斯頓分析師
珍·懷特行銷總監
雷·弗林特技術顧問
<div class="h-32 overflow-y-auto ..."> <!-- ... --></div>總是水平捲動
使用 overflow-x-scroll 工具類別，以允許水平捲動，並始終顯示捲軸，除非作業系統停用了總是可見的捲軸
水平捲動
AndrewEmilyWhitneyDavidKristinSarah<div class="overflow-x-scroll ..."> <!-- ... --></div>總是垂直捲動
使用 overflow-y-scroll 工具類別，以允許垂直捲動，並始終顯示捲軸，除非作業系統停用了總是可見的捲軸
垂直捲動
安德魯·艾爾弗雷德技術顧問
黛布拉·休斯頓分析師
珍·懷特行銷總監
雷·弗林特技術顧問
<div class="overflow-y-scroll ..."> <!-- ... --></div>在所有方向捲動
使用 overflow-scroll 工具類別來為元素添加捲軸
垂直和水平捲動
日
一
二
三
四
五
六
早上 5 點
早上 6 點
早上 7 點
早上 8 點
早上 9 點
早上 10 點
早上 11 點
中午 12 點
下午 1 點
下午 2 點
下午 3 點
下午 4 點
下午 5 點
下午 6 點
下午 7 點
下午 8 點
早上 5 點飛往溫哥華多倫多 YYZ
早上 6 點早餐梅爾的餐廳
下午 5 點🎉 派對派對 🎉我們喜歡派對！
<div class="overflow-scroll ..."> <!-- ... --></div>與僅在必要時顯示捲軸的 overflow-auto 不同，此工具類別始終顯示它們。請注意，某些作業系統（如 macOS）無論此設定如何，都會隱藏不必要的捲軸。
響應式設計
前綴一個 overflow 工具類別 使用斷點變體，如 md:，僅在中等 螢幕尺寸及以上套用此工具類別
<div class="overflow-auto md:overflow-scroll ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。
