overflow

簡寫屬性語法:

overflowvisible | hidden | scroll | auto | clip

預設值看每個獨立屬性

適用於:塊容器,伸縮盒容器,grid容器

繼承性:無

動畫性:否

計算值:看每個獨立屬性

媒 體:視覺

分拆獨立屬性語法:

overflow-*visible | hidden | scroll | auto | clip

overflow-* = overflow-x,overflow-y

預設值visible

適用於:塊容器,伸縮盒容器,grid容器

繼承性:無

動畫性:否

計算值:指定值,除了當overflow-x,overflow-y之一設定為非 visible時另一個屬性會自動將預設值visible計算為auto

媒 體:視覺

取值:

visible:
對溢出內容不做處理,內容可能會超出容器。
hidden:
隱藏溢出容器的內容且不出現滾動條。
scroll:
隱藏溢出容器的內容,溢出的內容可以通過滾動呈現。
auto:
當內容沒有溢出容器時不出現滾動條,當內容溢出容器時出現滾動條,按需出現滾動條。textarea元素的overflow預設值就是auto
clip:
hidden一樣,clip也被用來隱藏溢出容器的內容且不出現滾動條。不同的地方在於,clip是一個完全禁止滾動的容器,而hidden仍然可以通過編程機制讓內容可以滾動。

說明:

定義了元素處理溢出內容的方式。
  • overflow的效果等同於overflow-x + overflow-y

    舉個例子:

    .demo { overflow: hidden; } 等同於: .demo { overflow-x: hidden; oveflow-y: hidden; }
  • 當塊級元素定義了overflow屬性(包括overflow-xoverflow-y)值為非 visibile時,將會為它的內容建立一個新的塊格式化上下文(BFC)。
  • 對於table元素來說,假如其table-layout屬性設定為fixed,則tdth元素支援將overflow設為hiddenscrollauto,此時超出單元格尺寸的內容將被剪切。如果設為visible,將導致額外的文字溢出到右邊或左邊(視direction屬性設定而定)的單元格。
  • overflow-x屬性用於指定元素水平方向上的內容溢出時的處理方式,overflow-y屬性用於指定元素垂直方向上的內容溢出時的處理方式。
  • overflow-x,overflow-y中任意一個屬性值的定義為非 visible時,另一個屬性會自動將預設值visible計算為auto

    舉個例子:

    .demo { overflow-x: hidden; } 等同於: .demo { overflow-x: hidden; oveflow-y: auto; }
  • 對應的腳本特性分別為:overflow, overflowX, overflowY

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0+ 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+
clip 16.0 58.0 64.0 11.0 50.0 11.0 62.0 64.0

示例: