CSS_overflow用法

這一篇要介紹「overflow」的各種用法

教學網站

https://www.w3schools.com/cssref/pr_pos_overflow.asp

我的codepen練習

https://codepen.io/saffranwang/pen/KLMyRx

Definition and Usage

• overflow是用來設定「當 content 超出元素的範圍時，content 會如何呈現」

• 當元素裡面的 content 因為太多而無法塞進元素時，overflow有兩種呈現方式可以設定：

  • 裁切 content
  • 加上 scrollbar

Note:
overflow只能用在「區塊元素」，並且要「寫死元素的高度」

CSS Syntax

overflow: visible|hidden|scroll|auto

[語法說明]

visible

• 此為預設值
• 超出的內容不會被裁切，會完整的呈現（超出元素的範圍也沒關係）

overflow: visible;

hidden

• 超出的內容會被裁切掉，且是看不到的

overflow: hidden;

scroll

• 超出的內容會被裁切掉，但因為有加上了「scrollbar」，滾動就可以看到超出的內容

overflow: scroll;

auto

• 如果超出的內容有被裁切，就會自動加上「scrollbar」來看到超出的內容

overflow: auto;