CSS 當內容超過容器時的設定- overflow

2020-03-06 23:44:02

當內容超過容器的大小時，在 html 預設是看得到超過的範圍的，但這樣很容易造成破版，也是許多初學者會犯的錯誤，那是因為網頁標籤預設的 overflow 是 visible，也就是超過範圍時還能看得到，但容器的大小是沒有變的，沒有設置好的話就很容易蓋到接下來的內容。

以下是幾個當遇到內容超過容器時 overflow 可以設定的值，包括：

visible: 預設，也就是可以看到超過的內容。
hidden: 隱藏，超過的內容會看不到
scroll: 不管內容是否有超過容器，容器會出現捲軸。
auto: 內容超過容器時會出現捲軸，沒有的話則維持原樣。

CSS3 的陰影效果 box-shadow 與 text-shadow 用 Hover.css 幫你的網頁元素增加一點互動

你可能也會喜歡的

用純 CSS 製作 checkbox 的開關元件(toggle switch)

Tailwind CSS- Utility-First CSS 的 CSS 框架

Grid Garden- 透過遊戲讓你練習 CSS grid 屬性

HTML 的 progress 標籤，與自訂樣式的方法

Code Guide- 提供建議讓你的 HTML 及 CSS 可以寫得更好

CSS 的 max()、min() 與 clamp()

課程推薦

AI工作術全面學習實戰營：6 堂精選課程，學會最好用 AI 工具，翻轉你的人生

《PChome雜誌》攜手 5 位在 AI 領域的專業講師，打造上述 6 堂實用課程，教你學會時下最好用的 AI 工具，導入生成式 AI 來產製工作內容，改造並升級你的工作流程。

輸入折扣碼 ZERO2024 還可以額外獲得 NT$400 優惠喔。

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上，同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學，加上 ChatGPT 的輔助，您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗，還會大幅提高網站的搜索引擎排名，進而增加訪客流量和潛在客戶。