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
,則可能會爭奪空間。盒模型單元會進一步說明這個潛在的版面配置偏移來源。
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
屬性可防止溢出捲動流入父項容器 (稱為捲動鏈結)。
進行隨堂測驗
測驗您對溢位功能的瞭解程度
文字溢位和元素溢位是否相同?
overflow
屬性可接受 2 個關鍵字,第一個關鍵字是用於哪個軸?
捲軸在顯示和內嵌時,會佔用盒子模型中的哪些空間?
如要擷取巢狀隱含捲動器中的捲動額外動力,您會使用哪個屬性?
overscroll-effect
overscroll-behavior
scroll-hint
scroll-padding
scroll-behavior