内容溢出与裁切 ( overflow )

当区块容器元素的内容超过了容器的范围，就可能会发生“overflow 溢出”的状况，透过 CSS 的 overflow 样式属性，就能定义是否裁切溢出的内容，或将溢出的内容隐藏并产生卷轴，这篇教学会介绍 overflow 样式相关属性值，以及延伸的 overflow-x、overflow-y 样式属性用法。

快速导览：

• overflow 撰写语法
  • 属性值 visible 和 hidden
  • 属性值 scroll
  • 属性值 auto
• overflow-x、overflow-y 撰写语法
• overflow 与 position 定位关系

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

overflow 撰写语法

当网页的区块容器元素 ( block 显示属性 ) 包含内容时，内容常会产生溢出或撑开元素等显示行为，为了更方便的管理这些显示行为，CSS 提供了 overflow 样式属性，透过这个样式可以定义“可以设定宽高的 block 元素内容溢出后的行为”的样式属性，overflow 样式属性有下列的属性值：

下方展示最基本的范例，当可以设定宽高的元素设定了 overflow: hidden，过长的内容就会溢出范围并且隐藏。

线上展示：https://codepen.io/oxxo/pen/RNWjEgV

<!-- HTML 程式碼 -->
<div>我是 block，Hello World!!</div>
<br>
<em>我是 inline-block，Hello World!!</em>
<br>
<span>我是 inline，Hello World!!</span>

<!-- CSS 程式碼 -->
<style>
  div, span, em {
    width: 150px;
    height: 50px;
    border: 1px solid #000;
    white-space: nowrap;       /* 強制不換行 */
    overflow: hidden;          /* 溢出後隱藏 */
  }
  em {
    display: inline-block;     /* 改變顯示類型 */
  }
</style>

属性值 visible 和 hidden

overflow 的属性值 visible 和 hidden 分别表示元素的内容“完整显示”和“超出范围就隐藏”，隐藏的内容不代表消失，而是跑到了元素容器范围之外，下方的范例设定 overflow: 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>

如果将内容换成具有长宽尺寸的“图片”，溢出和使用 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>

属性值 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>

元素设定 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>

如果要单独显示 x y 方向的卷轴，除了可以透过 overflow-x 或 overflow-y 的样式属性，也可以在 overflow 撰写“两个属性值”，就会分别代表 x y 方向是否要出现卷轴或是否隐藏内容，如果属性值是 hidden 表示不会出现卷轴与卷轴空间，如果属性值是 auto 表示会自动出现卷轴，没有出现卷轴时不会有卷轴空间，如果属性值为 scroll 则是会强制出现卷轴空间。

• 如果只撰写一个属性值，等同两个相同属性值，例如 hidden 等于 hidden hidden，会同时隐藏 x y 方向溢出内容。
• 只要有一个属性值出现 auto、hidden 或 scroll，容器就会忽略 visible，隐藏溢出内容。

下方范例使用六个 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>

属性值 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>

overflow-x、overflow-y 撰写语法

除了使用 overflow 两个属性值设定 x y 轴的内容溢出显示方式，也可以使用 overflow-x、overflow-y 单独设定 x y 轴的内容溢出显示方式，使用的属性值和 overflow 完全相同，设定后就等同 overflow 设定两个属性值，下方列出两者产生相同结果的写法：

下方范例呈现 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>

overflow 与 position 定位关系

如果 overflow 属性值不为 visible 的元素，里面包含的子元素定位样式 position 是“absolute 或 sticky”，都会被 overflow 所影响而造成内容裁切，且 sticky 的效果也会消失，下方范例可以看出绝对定位图片仍然会因为内容溢出而被裁切，黏贴定位图片在 overflow:auto 的状态下也会失去黏贴定位的效果。

线上展示：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>

不过使用 absolute 需要注意，如果设定 overflow 的元素是“非 static 元素”，内容会被元素的 overflow 所影响，反之则不会被影响，简单整理如下表所示：

下方范例的 div 不设定 position ( 使用默认值 static )，而外层 main 设定为 relative，这时 div 里的图片如果进行 absolute 绝对定位，就会参考 main 的位置，而不受到 div 影响，而 position:fixed 会参考页面视窗定位，不会受到 overflow 影响 ( 参考“定位 position”)

线上展示：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>

小结

overflow 也是排版中常见的样式属性，甚至许多设计师会利用这个样式属性，将 div 伪装成 textarea 使用，或透过这个样式属性隐藏部分内容或图案，只要学会了 overflow 的用法，就能让网页排版更有灵活操控的弹性。

意见反馈