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
屬性可避免溢位捲動外洩至父項容器 (稱為捲動鏈結)。
隨堂測驗
測驗您對溢位的瞭解程度
文字溢位和元素溢位相同嗎?
overflow
屬性接受 2 個關鍵字,第一個關鍵字適用於哪個軸?
顯示和內嵌顯示畫面時,捲軸會耗用哪個空間?
overlay
模式下的捲軸會與邊框間距重疊,而在 inline
模式下,捲軸則會加入邊框間距。為了減少在巢狀隱含捲動式中捲動所需的額外動力,您會使用哪項屬性?
scroll-behavior
scroll-hint
overscroll-behavior
contain
將會破壞捲動。scroll-padding
overscroll-effect