CSS 排版詞條 3-24

溢出Overflow

也常叫做：溢出、爆版、Overflow

你可能會這樣說

網站在手機上出現橫向捲動，或某個區塊的內容太長直接穿過底邊，找不到內容跑出去的原因。

overflow 是內容超過容器時的處置方式：藏起來、出現捲軸、或照樣露出去。最常見的困擾叫「橫向爆版」——某個元素比螢幕還寬，整頁就能左右滑，體感很糟。

抓兇手的方法：請 AI 幫你逐層檢查寬度，常見嫌犯是沒設上限的圖片、固定寬的表格、忘記換行的長網址。

處理原則：整頁不允許橫向捲動，區塊內部可以捲；圖片一律跟著容器縮放。

這是一個固定高度的容器。當內容比容器高的時候，就是「溢出」登場的時刻。第一行；第二行；第三行；第四行；第五行；第六行——你現在看到的是第幾行？再往下還有一行：只有捲動（或換成 visible）才看得到：隱藏彩蛋 🎉

容器高度溢出處理

整頁不允許橫向捲動；抓爆版先從沒設上限的圖片和固定寬的表格查起。

圖 3-24　把容器壓矮、換四種處理方式，看溢出的不同命運。

中文就可以

我的手機版可以左右滑，請抓出爆版來源：
全頁禁止橫向捲動，找出超寬的元素並回報是哪一個。
圖片與影片一律最大寬 100%、自動等比例縮放。
表格在窄螢幕改成可橫向捲動的容器，而不是撐爆頁面。
長文字與網址要能自動換行。
修完用 375px 寬度測試，貼結果給我看。