F2E合作社｜overflow通用類別｜Bootstrap 5網頁框架開發入門

前言

身為網頁設計忍者，學會風遁 overflow 術是必須的，能讓你面對不同敵人時，決定要現身、隱身還是影分身，在作戰時可是相當好用，查克拉儲備足夠了嗎？那就開始吧！

（ 圖片來源 ）

官方網站的 Overflow 頁面

之前也有寫過相關文章，所以這裡只會簡略說明，想看更詳盡的介紹 這邊 歡迎光臨！

overflow

使用四個預設的值與類別，即時的調整 overflow 屬性，預設情況下這些類別並非響應式的。

.overflow-auto

自動選擇由瀏覽器決定如何顯示（ 預設值 ），當超出範圍時自動變成捲軸呈現方式。

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

.overflow-hidden

內容會被修剪，但不會顯示捲軸，當超出元素的範圍時隱藏內容。

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

.overflow-visible

內容不會被修剪，當超出元素的範圍時內容會呈現在元素框之外。

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

.overflow-scroll

內容會被修剪，當超出範圍時自動變成捲軸呈現方式。

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

參考資料

1. Overflow · Bootstrap v5.0
2. 溢出 (Overflow) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0
3. 共用項目overflow-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學