CSS Overflow

CSS 佈局 - Overflow

❮ 上一頁 下一頁 ❯

CSS overflow 屬性控制內容過大無法放入區域時會發生什麼。

這段文字很長，並且其容器的高度只有 100 畫素。因此，添加了捲軸來幫助讀者滾動內容。Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

自己動手試一試 »

CSS Overflow

當元素的 `overflow` 屬性內容過大，無法適應指定區域時，該屬性指定是裁剪內容還是新增捲軸。

該 overflow 屬性具有以下值：

visible - 預設。溢位未被裁剪。內容會在元素框外渲染。

hidden - 溢位被裁剪，其餘內容將不可見。

scroll - 溢位被裁剪，並新增捲軸以檢視其餘內容。

auto - 類似於 scroll，但僅在必要時新增捲軸。

注意： overflow 屬性僅對設定了高度的塊級元素有效。

注意： 在 OS X Lion（Mac 上），捲軸預設是隱藏的，只有在使用時才會顯示（即使設定了“overflow:scroll”）。

overflow: visible

預設情況下，溢位是 visible，這意味著它不會被裁剪，並且會在元素框外部渲染。

當您想要更好地控制佈局時，可以使用 overflow 屬性。overflow 屬性指定當內容溢位元素框時會發生什麼。

示例

div { width: 200px; height: 65px; background-color: coral; overflow: visible;}

自己動手試一試 »

overflow: hidden

使用 hidden 值時，溢位將被裁剪，其餘內容將被隱藏。

當您想要更好地控制佈局時，可以使用 overflow 屬性。overflow 屬性指定當內容溢位元素框時會發生什麼。

示例

div { overflow: hidden;}

自己動手試一試 »

overflow: scroll

將值設定為 scroll，溢位將被裁剪，並新增捲軸以便在框內滾動。請注意，這將同時新增水平和垂直捲軸（即使您不需要它們）。

當您想要更好地控制佈局時，可以使用 overflow 屬性。overflow 屬性指定當內容溢位元素框時會發生什麼。

示例

div { overflow: scroll;}

自己動手試一試 »

overflow: auto

auto 值類似於 scroll，但僅在必要時新增捲軸。

當您想要更好地控制佈局時，可以使用 overflow 屬性。overflow 屬性指定當內容溢位元素框時會發生什麼。

示例

div { overflow: auto;}

自己動手試一試 »

overflow-x 和 overflow-y

overflow-x 和 overflow-y 屬性指定是僅更改內容的水平溢位還是垂直溢位（或兩者都更改）。

overflow-x 指定內容左右邊緣溢位時會發生什麼。

overflow-y 指定內容上下邊緣溢位時會發生什麼。

當您想要更好地控制佈局時，可以使用 overflow 屬性。overflow 屬性指定當內容溢位元素框時會發生什麼。

示例

div { overflow-x: hidden; /* 隱藏水平捲軸 */ overflow-y: scroll; /* 新增垂直捲軸 */}

自己動手試一試 »

透過練習來測試自己

練習

強制為類名為 "intro" 的