溢位

CSS Podcast - 034: 溢位

當內容超出其父項時，您可以透過多種方式處理。您可以捲動畫面來增加空白空間、裁剪溢出的邊緣、以省略號表示截斷處等等。在開發手機應用程式和多種螢幕大小時，溢位問題尤其重要。

CSS 中有兩種不同的裁剪選項：text-overflow 可用於個別文字行，而 overflow 屬性可用於控制邊框模型中的溢位。

使用 text-overflow 的單行溢位

針對任何包含文字節點的元素使用 text-overflow 屬性，例如段落 <p>。用於指定文字超出元素可用空間時的顯示方式。網頁上所有可見的 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，則可能會爭奪空間。箱模型模組會進一步說明可能的版面配置位移來源。

root-scroller 與 implicit-scroller

您可能會發現，部分捲動器具有拉動重新整理行為和其他特殊行為，尤其是在為行動裝置和混合應用程式開發時。這個捲動行為會在根捲動器上發生。一個頁面只能有一個根捲軸。根據預設，documentElement 是頁面的根捲動器，但變更哪個元素是根捲動器後，特殊行為就可以套用至 documentElement 以外的捲動器，我們將這個新的捲動器稱為隱含根捲動器。

如要建立根捲軸，您可以使用「捲軸升級」功能，將容器設為固定位置，確保捲軸涵蓋整個檢視區，並在捲軸上方設為 z-index。如要體驗根捲動器與巢狀隱含捲動器的差異，請按這裡。

scroll-behavior

scroll-behavior 可讓你選擇透過瀏覽器控制的元素捲動功能。這可讓您指定如何處理 .scrollTo() 或連結等網頁內導覽。

搭配 prefers-reduced-motion 使用時特別實用，可根據使用者偏好指定捲動行為。

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

overscroll-behavior

如果您曾經到達模式重疊層的結尾，然後繼續捲動，並讓重疊層後方的頁面移動，這就是捲動鏈結，或稱為向上傳遞至父項捲動容器。overscroll-behavior 屬性可防止溢出捲動流入父項容器 (稱為捲動鏈結)。

進行隨堂測驗

測試您對溢位的瞭解程度

資源

CSS 中的溢位和資料遺失問題 (Smashing Magazine)