流式佈局和溢位

為元素指定固定高度和寬度，然後向該框新增大量內容，就可以建立一個基本的溢位示例。

內容進入該框。當它填滿該框時，它會以可見的方式繼續溢位，在框外顯示內容，可能顯示在後續內容下方。控制溢位行為的屬性是 overflow 屬性，它具有初始值 visible。這就是為什麼我們可以看到溢位內容的原因。

還有其他值可以控制溢位內容的行為。要隱藏溢位內容，請使用 hidden 值。這可能會導致部分內容不可見。

使用 scroll 值將內容包含在它的框中並新增捲軸以使其可檢視。即使內容適合該框，也會新增捲軸。

使用 auto 值將在內容適合該框的情況下顯示內容，沒有捲軸。如果它不適合，則會新增捲軸。將下一個示例與 overflow: scroll 的示例進行比較，您應該會看到 overflow scroll 在只需要垂直滾動時，具有水平和垂直捲軸。下面的 auto 示例僅在我們需要滾動的地方新增捲軸。

正如我們已經學到的，使用除 visible 預設值以外的任何值，都會建立一個新的塊級格式化上下文。

注意：在 溢位級別 3 工作草案 中，有一個附加值 overflow: clip。它將像 overflow: hidden 一樣工作，但它不允許進行程式設計滾動，該框將變得不可滾動。此外，它不會建立塊級格式化上下文。

overflow 屬性實際上是 overflow-x 和 overflow-y 屬性的簡寫形式。如果您只為 overflow 指定一個值，則該值將用於兩個軸。但是，您可以指定兩個值，在這種情況下，第一個值用於 overflow-x 以及水平方向，第二個值用於 overflow-y 以及垂直方向。在下面的示例中，我只指定了 overflow-y: scroll，因此我們不會得到不需要的水平捲軸。

在 寫作模式和流佈局 指南中，我們查看了 block-size 和 inline-size 的更新屬性，這些屬性在處理不同的寫作模式時比將我們的佈局繫結到螢幕的物理尺寸更有意義。Level 3 Overflow 模組還包括用於 overflow 的流相對屬性 - overflow-block 和 overflow-inline。這些對應於 overflow-x 和 overflow-y，但對映取決於文件的寫作模式。

這些屬性目前在瀏覽器中還沒有實現，所以您現在需要使用物理屬性並根據您的寫作模式進行調整。

在 Level 3 Overflow 規範中，我們有一些屬性可以幫助改善內容在溢位情況下的外觀。

The text-overflow 屬性處理文字在內聯方向上的溢位。它採用兩個值之一 clip，在這種情況下，當內容溢位時內容會被剪下，這是初始值，因此是預設行為。我們還有 ellipsis，它會渲染一個省略號，該省略號可能會被使用中的語言或寫作模式的更好的字元替換。

還提議了一個 block-overflow 屬性，雖然在撰寫本文時該名稱仍在討論中。此提議將允許在文字在塊維度上溢位時新增省略號。

這在您有一系列文章的情況下很有用，例如，您將列表顯示在固定高度的框中，這些框只佔用有限數量的文字。對於讀者來說，可能不明顯的是，在單擊框或標題時，還有更多內容可以點選。省略號清楚地表明還有更多內容。該規範將允許插入一串內容或一個常規省略號。

無論您是在網路上的連續媒體中還是在分頁媒體格式（如列印或 EPUB）中，瞭解內容如何溢位對於處理任何佈局方法都很有用。通過了解 overflow 在正常流中的工作方式，您應該更容易理解 overflow 內容在網格和 flexbox 等佈局方法中的含義。