溢位

CSS Podcast - 034：溢位

當內容超出父項時，您可以採取多種處理方式。您可以捲動畫面加入額外空間、裁剪溢位邊緣、以刪節號表示截斷等等。開發手機應用程式和多種螢幕大小時，溢位顯得特別重要。

CSS 提供兩種裁剪選項：text-overflow 可協助處理每一行文字，而 overflow 屬性可協助控制方塊模型中的溢位現象。

使用 text-overflow 的單行溢位

在任何包含文字節點的元素(例如段落 <p>) 中使用 text-overflow 屬性。用於指定當文字超出元素可用空間時的顯示方式。網頁上所有可檢視的 HTML 文字位於文字節點中。如要使用 text-overflow，您需要一行未換行的文字，因此您也必須將 overflow 設為 hidden，並提供禁止換行的 white-space 值。

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

使用溢位屬性

系統會在元素上設定溢位屬性，控制其子項所需的空間超過可用空間時的處理方式。這是刻意設計的做法，例如 Google 地圖等互動式地圖，使用者在平移到特定大小的大型圖片周圍。同時，使用者也會意外輸入無法在文字對話框中輸入的冗長訊息，例如使用即時通訊應用程式。

您可以把溢位想成兩個部分。父項元素具有嚴格限制的空間，不會改變。您可以將此視為一個視窗。子元素是指需要父項空間較多的內容。這就像你在瀏覽窗口的畫面一樣。管理溢位有助於引導視窗界定這項內容。

捲動垂直軸和水平軸

overflow-y 屬性可控制裝置可視區域垂直軸上的實體溢位，因此上下捲動。

overflow-x 屬性可控制裝置可視區域水平軸溢位，因此左右捲動。

捲動方向的邏輯屬性

overflow-inline 和 overflow-block 屬性會根據文件方向和寫入模式設定溢位。

overflow 簡寫

overflow 簡寫為一行設定 overflow-x 和 overflow-y 樣式：

overflow: hidden scroll;

如果指定兩個關鍵字，第一個關鍵字會套用到 overflow-x，並將第二個關鍵字套用至 overflow-y。否則 overflow-x 和 overflow-y 會使用相同的值。

值

讓我們進一步瞭解 overflow 屬性可用的值和關鍵字。

overflow: visible (預設)

如果沒有設定屬性，overflow: visible 就會是網站的預設值。這可確保內容絕不會意外隱藏，並遵循「一律不隱藏內容」或「精確版面配置的安全版面配置」的核心原則。

overflow: hidden

使用 overflow: hidden 內容會按指定方向裁剪，且沒有提供任何捲軸來顯示內容。

overflow: scroll

overflow: scroll 啟用捲軸，可讓使用者捲動內容。即使內容目前並未溢出，仍會顯示捲軸。舉例來說，假如容器日後可以捲動 (例如在調整大小時)，或是讓使用者能根據可捲動的區域做好準備，這項功能可有效減少日後的版面配置位移。

overflow: clip

和 overflow: hidden 一樣，含有 overflow: clip 的內容會裁剪為元素的邊框間距方塊。clip 和 hidden 的差異在於 clip 關鍵字也會禁止所有捲動行為，包括程式輔助捲動。

overflow: auto

最後是最常使用的值 overflow: auto。這會按照使用者的偏好設定顯示，並視需要顯示捲軸，但系統預設會隱藏捲軸，並負責向使用者和瀏覽器捲動畫面。

捲動和溢位

其中許多 overflow 行為都會引入捲軸，但我們也提供一些特定的捲動行為和屬性，協助您控制溢位容器的捲動行為。

捲動和無障礙功能

請務必確保可捲動區域可接受焦點，方便鍵盤使用者按 Tab 鍵移至方塊，然後使用方向鍵捲動。

如要允許捲動方塊接受焦點，請新增 tabindex="0"、具有 aria-labelledby 屬性的名稱以及適當的 role 屬性。例如：

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

接著，CSS 就能使用 outline 屬性來表示方塊已聚焦，並利用視覺線索說明這個方塊現在可供捲動。

在「透過 CSS 強制執行無障礙功能」中，Adrian Roselli 將說明 CSS 如何協助防範無障礙迴歸。舉例來說，只有在使用正確的屬性時，才開啟捲動功能並新增焦點指標。下列規則只會讓方塊具備 tabindex、aria-labelledby 和 role 屬性可捲動。

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

方塊模型內的捲軸位置

捲軸會佔用邊框間距方塊內的空間，如果 inline 而不是 overlaid，則可以競爭空間。方塊模型模組會進一步說明這個版面配置位移潛在來源。

根捲動器與隱式捲動器

您可能會注意到，部分捲動器具有下拉重新整理行為和其他特殊行為，尤其是針對行動和混合型應用程式進行開發時。這個捲動行為會在根層級捲動工具上發生。一個網頁上只有一個根捲動器。根據預設，documentElement 是網頁的根捲動器，但只要變更哪個元素為根捲動器，特殊行為就能套用至 documentElement 以外的捲動器，我們將這個特殊行為稱為隱含根捲動器。

如要建立根式捲動器，您可以使用「捲動式宣傳」工具，將容器定位為固定位置，確保容器覆蓋整個可視區域，並透過捲動器放在 Z-index 上方。歡迎在這裡體驗根捲動器和巢狀隱含捲動工具的差別。

捲動行為

scroll-behavior 可讓您選擇在瀏覽器上捲動畫面至元素。這樣做可讓您指定網頁內瀏覽作業 (例如 .scrollTo()) 或連結的處理方式。

與「偏好縮減動作」搭配使用，可根據使用者偏好指定捲動行為時，這種做法特別實用。

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

過度捲動行為

如果已到達強制回應圖層的結尾，然後繼續捲動，導致頁面位於重疊元素後方，這是捲動鏈結，或向上彈出父項捲動容器。overscroll-behavior 屬性可避免溢位捲動外洩至父項容器 (稱為捲動鏈結)。

隨堂測驗

測驗您對溢位的瞭解程度

資源

《Smashing Magazine》中的 CSS 溢位和資料遺失問題