內容溢出與裁切 overflow

當區塊容器元素的內容超過了容器的範圍，就可能會發生「overflow 溢出」的狀況，透過 CSS 的 overflow 樣式屬性，就能定義是否裁切溢出的內容，或將溢出的內容隱藏並產生捲軸，這篇教學會介紹 overflow 樣式相關屬性值，以及延伸的 overflow-x、overflow-y 樣式屬性用法。

快速導覽：

overflow 撰寫語法

屬性值 visible 和 hidden

屬性值 scroll

屬性值 auto

overflow-x、overflow-y 撰寫語法

overflow 與 position 定位關係

CSS 教學 - 內容溢出與裁切 overflow

overflow 撰寫語法

當網頁的區塊容器元素 ( block 顯示屬性 ) 包含內容時，內容常會產生溢出或撐開元素等顯示行為，為了更方便的管理這些顯示行為，CSS 提供了 overflow 樣式屬性，透過這個樣式可以定義「block 元素內容溢出後的行為」的樣式屬性，overflow 樣式屬性有下列的屬性值：

屬性值	說明
visible	完整顯示內容，會發生溢出或撐開容器的狀況 ( 預設值 )。
hidden	超過元素容器範圍的內容就隱藏。
scroll	強制出現捲軸，內容超過範圍時可用捲軸捲動瀏覽。
auto	元素內容沒有超過容器範圍時不會出現捲軸，超過容器範圍時出現捲軸。

屬性值 visible 和 hidden

overflow 的屬性值 visible 和 hidden 分別表示元素的內容「完整顯示」和「超出範圍就隱藏」，隱藏的內容不代表消失，而是跑到了元素容器範圍之外，下方的範例將 strong 元素和 h3 元素設定為 visibility:hidden，這兩個元素就會從畫面中消失，但其空間仍然保留。

線上展示：https://codepen.io/oxxo/pen/JjQeKqx

<!-- HTML 程式碼 -->
<div>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div class="a">STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>


<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 200px;
    height: 70px;
    padding: 10px;
    margin: 10px;
  }
  .a {
    margin-top: 60px;
    overflow: hidden;
  }
</style>

CSS 教學 - 內容溢出與裁切 overflow - visible 和 hidden

如果將內容換成具有長寬尺寸的「圖片」，溢出和使用 overflow:hidden 裁切的效果就會更為明顯 ( 水平垂直都發生溢出和裁切 )。

線上展示：https://codepen.io/oxxo/pen/mdZQEZJ

<!-- HTML 程式碼 -->
<div><img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg" alt=""></div>
<div class="a"><img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg" alt=""></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 200px;
    height: 70px;
    margin: 10px;
  }
  img {
    opacity: .8;     /* 讓圖片變成半透明，方便觀察 */
    border: 1px solid red;
  }
  .a {
    margin-top: 230px;
    overflow: hidden;
  }
</style>

CSS 教學 - 內容溢出與裁切 overflow - 圖片溢出範圍

屬性值 scroll

overflow 的屬性值 scroll 會在元素容器「強制加上捲軸」，如果內容的寬高不足以產生捲軸，也會保留捲軸所需的空間，元素內部空間也會往內縮，下方範例呈現加上 overflow:scroll 的效果。

線上展示：https://codepen.io/oxxo/pen/bGPQePg

<!-- HTML 程式碼 -->
<div>預設值</div>
<div class="a">overflow: scroll;</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 200px;
    height: 70px;
    margin: 10px;
    background: orange;
  }
  .a {
    overflow: scroll;
  }
</style>

CSS 教學 - 內容溢出與裁切 overflow - scroll 保留捲軸所需的空間

元素設定 overflow:scroll 之後，內容如果是沒有指定換度的 inline 行內容器元素，會將寬度限制在父元素的容器寬度裡，若高度超過容器高度就會產生捲軸，而如果是圖片或區塊容器元素，超過父元素容器範圍內容就不會顯示，並出現捲軸。

線上展示：https://codepen.io/oxxo/pen/KKjrMjX

<!-- HTML 程式碼 -->
<div class="a">STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div class="a"><img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg" alt=""></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 150px;
    height: 150px;
    margin: 10px;
    overflow: scroll;
  }
</style>

CSS 教學 - 內容溢出與裁切 overflow - inline 或 block 元素設定 overflow:scroll

如果要單獨顯示 x y 方向的捲軸，除了可以透過 overflow-x 或 overflow-y 的樣式屬性，也可以在 overflow 撰寫「兩個屬性值」，就會分別代表 x y 方向是否要出現捲軸，如果屬性值是 hidden 表示不會出現捲軸與捲軸空間，如果屬性值是 auto、 visible 表示會自動出現捲軸，沒有出現捲軸時不會有捲軸空間，果屬性值為 scroll 則是會強制出現捲軸空間。

下方範例使用六個 div，分別呈現兩個屬性值所產生的不同效果。

線上展示：https://codepen.io/oxxo/pen/rNEQLEK

<!-- HTML 程式碼 -->
<div class="a">下方出現捲軸空間</div>
<div class="b">自動產生捲軸，沒有產生時隱藏捲軸空間。</div>
<div class="c">自動產生捲軸，沒有產生時隱藏捲軸空間。</div>
<div class="d"><img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg" alt=""></div>
<div class="e"><img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg" alt=""></div>
<div class="f"><img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg" alt=""></div>


<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 200px;
    height: 100px;
    margin: 5px;
    background: yellow;
    float: left;
  }
  .a {overflow: scroll hidden;}  /* 水平強制出現捲軸 */
  .b {overflow: visible hidden;} /* 水平自動出現捲軸 */
  .c {overflow: auto hidden;}    /* 水平自動出現捲軸 */
  .d {overflow: hidden scroll;}  /* 垂直強制出現捲軸 */
  .e {overflow: hidden visible;} /* 垂直自動出現捲軸 */
  .f {overflow: scroll auto;}    /* 水平強制出現捲軸，垂直自動出現捲軸 */
</style>

CSS 教學 - 內容溢出與裁切 overflow - 使用兩個屬性值

屬性值 auto

overflow 的屬性值 auto 會產生「自動隱藏和顯示」的捲軸，有別於 scroll 會強制出現捲軸空間，設定 auto 之後只有在內容超過範圍時，才會產生捲軸，其他情形不會出現捲軸空間，下方範例的三個 div 會呈現設定 auto 的不同結果。

線上展示：https://codepen.io/oxxo/pen/qBzQNzv

<!-- HTML 程式碼 -->
<div class="a"><img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg" alt=""></div>
<div class="b"><img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg" alt=""></div>
<div class="c"><img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg" alt=""></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 200px;
    height: 100px;
    margin: 10px;
    background: yellow;
    overflow: auto;
  }
  .a img{width: 50px;}  /* 沒有捲軸 */
  .b img{width: 100px;} /* 垂直方向有捲軸 */
  .c img{width: 200px;} /* 垂直水平都有捲軸 */
</style>

CSS 教學 - 內容溢出與裁切 overflow - 屬性值 auto

overflow-x、overflow-y 撰寫語法

除了使用 overflow 兩個屬性值設定 x y 軸的內容溢出顯示方式，也可以使用 overflow-x、overflow-y 單獨設定 x y 軸的內容溢出顯示方式，使用的屬性值和 overflow 完全相同，設定後就等同 overflow 設定兩個屬性值，下方列出兩者產生相同結果的寫法：

`overflow-x`、`overflow-y` 寫法	等同 `overflow` 兩個屬性值寫法	說明
`overflow-x: hidden;`	`overflow: hidden visible;`	水平隱藏，垂直自動顯示
`overflow-x: auto;`	`overflow: auto visible;`	水平垂直自動顯示
`overflow-y: scroll;`	`overflow: visible scroll;`	水平自動顯示，垂直強制顯示
`overflow-x: hidden;` `overflow-y: hidden;`	`overflow: hidden hidden;`	水平垂直隱藏
`overflow-x: auto;` `overflow-y: hidden;`	`overflow: auto hidden;`	水平自動顯示，垂直隱藏

下方範例呈現 overflow-x、overflow-y 寫法和 overflow 兩個屬性值寫法所呈現的相同效果。

線上展示：https://codepen.io/oxxo/pen/mdZQENJ

<!-- HTML 程式碼 -->
<div class="a"><img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg" alt=""></div>
<div class="aa"><img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg" alt=""></div>
<div class="b"><img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg" alt=""></div>
<div class="bb"><img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg" alt=""></div>
<div class="c"><img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg" alt=""></div>
<div class="cc"><img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg" alt=""></div>


<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 200px;
    height: 100px;
    margin: 10px 10px 30px;
    background: yellow;
    float: left;
  }
  .a{overflow-x: auto;}
  .aa{overflow: auto visible;}
  .b{overflow-x: hidden;}
  .bb{overflow: hidden visible;}
  .c{
    overflow-x: auto;
    overflow-y: scroll;
  }
  .cc{overflow: auto scroll;}
</style>

CSS 教學 - 內容溢出與裁切 overflow - overflow-x、overflow-y 撰寫語法

overflow 與 position 定位關係

如果 overflow 屬性值不為 visible 的元素，裡面包含的子元素定位樣式 position 是「absolute 或 sticky」，都會被 overflow 所影響而造成內容裁切，且 sticky 的效果也會消失，下方範例可以看出絕對定位圖片仍然會因為內容溢出而被裁切，黏貼定位圖片在 overflow:auto 的狀態下也會失去黏貼定位的效果。

position:fixed 會參考頁面視窗定位，不會受到 overflow 影響，參考「定位 position」。

線上展示：https://codepen.io/oxxo/pen/BagGzXL

<!-- HTML 程式碼 -->
<main>
  overflow: auto; + 絕對定位的圖片
  <div class="a"><img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg" alt=""></div>
  overflow: visible; + 黏貼定位圖片
  <div class="b"><img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg" alt=""></div>
  overflow: auto; + 黏貼定位圖片
  <div class="c"><img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg" alt=""></div>
</main>


<!-- CSS 程式碼 -->
<style>
  main {height: 2000px;}
  div {
    border: 1px solid #000;
    width: 200px;
    height: 150px;
    margin: 10px 10px 30px;
    background: yellow;
  }
  .a{
    overflow: auto;
    position:relative;
  }
  .a img {
    top: -100px;
    position: absolute;
  }
  .b{overflow: visible;}
  .b img, .c img {
    width: 300px;
    height:100px;
    top: 50px;
    position: sticky;   /* 黏貼定位 */
  }
  .c{overflow: auto;}
</style>

CSS 教學 - 內容溢出與裁切 overflow - overflow 與 position 定位關係

不過使用 absolute 需要注意，如果參考的「非 static 的祖先元素」沒有設定 overflow，該元素也會不會被父元素的 overflow 所影響，下方範例的 div 不設定 position ( 使用預設值 static )，而外層 main 設定為 relative，這時 div 裡的圖片如果進行 absolute 絕對定位，就會參考 main 的位置，而不受到 div 影響。

線上展示：https://codepen.io/oxxo/pen/MWMzeNQ

<main>
  div 有設定 relative
  <div class="a"><img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg" alt=""></div>
  div 沒有設定 relative
  <div class="b"><img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg" alt=""></div>
</main>


<!-- CSS 程式碼 -->
<style>
  main {
    border: 1px solid red;
    width:360px;
    height:420px;
    position:relative;   /* main 有設定 relative */
  }
  div {
    border: 1px solid #000;
    width: 200px;
    height: 150px;
    margin: 10px 10px 30px;
    background: yellow;
  }
  .a{
    overflow: auto;
    position:relative;   /* .a 有設定 relative */
  }
  .b{overflow: auto; }   /* .b 沒有設定 relative */
  img {
    border: 1px dotted #000;
    bottom: -70px;
    right: -70px;
    position: absolute;
  }
</style>

CSS 教學 - 內容溢出與裁切 overflow - overflow 與使用 absolute 元素的關係

小結

overflow 也是排版中常見的樣式屬性，甚至許多設計師會利用這個樣式屬性，將 div 偽裝成 textarea 使用，或透過這個樣式屬性隱藏部分內容或圖案，只要學會了 overflow 的用法，就能讓網頁排版更有靈活操控的彈性。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

內容溢出與裁切 overflow

overflow 撰寫語法

屬性值 visible 和 hidden

屬性值 scroll

屬性值 auto

overflow-x、overflow-y 撰寫語法

overflow 與 position 定位關係

小結

意見回饋

CSS 教學

基本介紹

CSS 選擇器

數值與單位

變數與內容函式

顏色與濾鏡

文字樣式

元素容器

背景與陰影

清單與表格

基本排版與定位

Flexbox 彈性排版

Grid 網格排版

轉場與動畫

變形、裁切與遮罩