iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 20
3

倘若不斷向深處扎根,就能茁壯成長 - RM

前言

在這裡我們將談到 CSS 中的 overflow 屬性,它與我們提及過的 block box 有關,通常內容都會在 box 的內部,不過有些時候內容可能會溢出跑到 box 的外側,而這個屬性可以處理當我們今天 block box 內容溢出時的顯示狀態,顯示在 box 外的內容是否裁減,以及裁剪後是否提供滑動顯示。

溢出可能會發生在以下的情況:

  1. 文字行不能被破壞,導致 line box 比 block box 寬的時候。
  2. 內含的 block-level box 比 block box 寬,導致 block box 無法裝下時。
  3. 當 block box 高度不取決於內容而是由 height 設定,且內容高度大於 block box 時。
  4. descendant box 透過絕對定位超出 block containing box。
  5. descendant box 透過設定 margin 負值超出 block containing box。
  6. 設置 text-indent 導致首行文本縮進伸出大於 block box 的時候。

舉例來說分別為以下的狀態

我們今天設定一個 <div> 其內容如上述六點設置。Codepen:overflow 囉~

https://ithelp.ithome.com.tw/upload/images/20191005/20111825HAbtq5hfLG.png

/*以下省略顏色、背景色等代碼,只節錄影響的屬性,全部設定請至codepen觀看*/
.content1{
  white-space: nowrap;
}
.content2{
  width: 700px;
  height: 10px;
}
.content3{
  height: 70px;
}
.content4{
  position: absolute;
  left: 400px;
  width: 30px;
  height: 30px;
}
.content5{
  height: 30px;
  width: 100px;
  margin-left: -20px;
}
.content6{
  text-indent: 20rem;
  font-size: 2rem;
}

透過設定 overflow 我們可以指定發生溢出時,採用裁剪或是滾動的方式來呈現超出的內容。

overflow

https://ithelp.ithome.com.tw/upload/images/20191005/20111825N1Tl1XLoC8.png

滾動條佔用的空間通常是從形成滾動條的元素中取出。

在此有一點特別注意,在 CSS2.1 中 overflow 為單一屬性,不過 CSS Overflow Module Level 3 中,oveflow 為

  1. overflow-x
  2. overflow-y
  3. overflow 是他倆的簡寫:x, y(當只有寫一個值,第二個值會參照第一個值)

https://ithelp.ithome.com.tw/upload/images/20191005/20111825ihLfJ2boJP.png

雖然規範仍為草案版本,但看起來目前的瀏覽器支援度還可。

https://ithelp.ithome.com.tw/upload/images/20191005/201118258K1lfp1P4j.png

as specified, except with visible/clip computing to auto/hidden (respectively) if one of overflow-x or overflow-y is neither visible nor clip

在這裡有特別一點,當設定 overflow-xoverflow-y 時,只要 clip、visible 與其他值合用了,就會轉為 auto。

合用範例:

Codepen

div {
  overflow-x: hidden;
  overflow-y: scroll;
}

可以看見 x 軸是隱藏、y 軸卻可以設定 scroll 滑動,在水平與垂直的設置不同。

overflow 與 independent formatting context

規範定義:
If the computed value of overflow on a block box is neither visible nor clip nor a combination thereof, it establishes an independent formatting context for its contents.

當今天我們設置 block box 元素屬性為 overflow:visibleoverflow:clip 以外時,block box 會對內創建一組 independent formatting context,所以當 block box 設置了這個屬性,其內部的子元素便不會與之產生 margin collapse。

參考資料:

Visual formatting model details
CSS Overflow Module Level 3


About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5


以上的部分有任何錯誤的地方,歡迎指正呦~非常感謝~~XD


上一篇
話說 line-height 是什麼呢?
下一篇
CSS Background 與 Canvas(document)
系列文
每天來點 CSS Specification30

尚未有邦友留言

立即登入留言