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 屬性指定當內容溢位元素框時會發生什麼。
overflow: hidden
使用 hidden 值時，溢位將被裁剪，其餘內容將被隱藏。
當您想要更好地控制佈局時，可以使用 overflow 屬性。overflow 屬性指定當內容溢位元素框時會發生什麼。
overflow: scroll
將值設定為 scroll，溢位將被裁剪，並新增捲軸以便在框內滾動。請注意，這將同時新增水平和垂直捲軸（即使您不需要它們）。
當您想要更好地控制佈局時，可以使用 overflow 屬性。overflow 屬性指定當內容溢位元素框時會發生什麼。
overflow: auto
auto 值類似於 scroll，但僅在必要時新增捲軸。
當您想要更好地控制佈局時，可以使用 overflow 屬性。overflow 屬性指定當內容溢位元素框時會發生什麼。
overflow-x 和 overflow-y
overflow-x 和 overflow-y 屬性指定是僅更改內容的水平溢位還是垂直溢位（或兩者都更改）。
overflow-x 指定內容左右邊緣溢位時會發生什麼。
overflow-y 指定內容上下邊緣溢位時會發生什麼。
當您想要更好地控制佈局時，可以使用 overflow 屬性。overflow 屬性指定當內容溢位元素框時會發生什麼。
所有 CSS Overflow 屬性
| 屬性 | 描述 |
|---|---|
| overflow | 指定內容溢位元素框時會發生什麼 |
| overflow-wrap | 指定瀏覽器是否可以用長單詞換行，如果它們溢位其容器。 |
| overflow-x | 指定當內容溢位元素的內容區域時，左右邊緣會發生什麼。 |
| overflow-y | 指定當內容溢位元素的內容區域時，上下邊緣會發生什麼。 |
