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
屬性可防止溢出捲動流入父項容器 (稱為捲動鏈結)。
進行隨堂測驗
測試您對溢位的瞭解程度
文字溢位和元素溢位是否相同?
overflow
屬性可接受 2 個關鍵字,第一個關鍵字是哪個軸?
捲軸在顯示和內嵌時,會佔用盒模型中的哪些空間?
如果要在巢狀隱含捲動器的捲動作業中造成額外動能,應使用哪項屬性?
scroll-behavior
scroll-padding
overscroll-effect
overscroll-behavior
scroll-hint