避免文字截斷和內容剪輯
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
智慧手錶的螢幕尺寸比手持裝置小,因此請務必排列顯示元素,以便使用者能夠有效存取,並且有效率地使用可用的螢幕空間。如要讓項目符合螢幕大小,請使用 Material 指南中指定的正確邊框間距和邊界大小。
即使設計符合螢幕大小,使用者執行下列任一操作時,介面元素可能會遭到截斷或裁剪:
- 變更顯示語言。
- 變更文字大小。
- 啟用「粗體文字」系統設定。
測試設計時請務必考量這些事項,確保設計能完美適應不同的使用者環境。
讓互動元素保持完整顯示
如果您的介麵包含互動式元素,請檢查使用者能否完全捲動這些元素,特別是將這些元素放在網頁邊緣時。如果您的應用程式使用 Horologist 程式庫,請使用 responsive()
版面配置工廠。否則,請使用空格字元,並在 ScalingLazyColumn
物件的頂端和底部加上邊界,避免系統一律裁剪第一個和最後一個清單項目。
密集的版面配置使用方塊 (而非資訊卡)
如果您需要更密集的版面配置,請使用 CompactChip
,而非資訊卡。資訊卡的顯示區域越大,就越難避免文字遭到截斷及內容裁剪。
考量螢幕尺寸對截斷和裁剪的影響
視 Wear OS 裝置的螢幕大小而定,顯示其他文字和按鈕的空間會比較大:
設計百分比邊界,而非固定邊界
如要建立會配合 Wear OS 裝置的螢幕大小調整內容,請套用百分比邊界,也就是每個邊界的大小與螢幕大小相對應。如果項目位於螢幕頂端或底部,請套用額外的內部邊框間距,盡量避免從螢幕曲線邊緣裁剪內容。相反地,如果內容群組的大小足以容納同一個畫面,頂端和底部的空間會增加。

check_circle
正確做法
元件必須遵循百分比邊界,這樣元件的大小才能依照螢幕大小縮放。這樣一來,螢幕內容一律會填滿可用空間,而且不會遭到螢幕邊緣裁剪。

cancel
錯誤做法
不要在未考量在較小的螢幕上截斷文字並影響設計功能的方式,就不能使用最大可用的文字空間。
使用較小的螢幕所規定的字元限制
在大多數情況下,大螢幕可在截斷前顯示更多文字和內容。不過,雖然可用的水平空間可能更多,但請一律針對最小的螢幕大小設計,以便在各種裝置上提供一致的體驗。
舉例來說,在較大的螢幕上,按鈕可能會在截斷前保留更多字元空間,但如果這些按鈕是重要的行動號召,對使用者體驗至關重要,那麼請在小型裝置的螢幕上使用足夠簡短 (不截斷的文字)。
或者,如果資訊方塊顯示變數內容 (例如從伺服器擷取的文字),請妥善規劃,可能使文字在較小的螢幕上遭到截斷。

check_circle
正確做法
影響設計功能的文字 (例如行動號召按鈕) 是以最小螢幕為設計主軸。在較大的螢幕上,可在中斷點後面顯示額外的文字行。文字行數取決於元件和內容。

cancel
錯誤做法
請勿撰寫會佔用大螢幕可用空間最大空間的文字,也不要考量這類文字在小螢幕上可能遭到截斷的情形,並影響設計功能。
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間:2025-07-27 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2025-07-27 (世界標準時間)。"],[],[],null,["# Prevent text truncation and content clipping\n\nSmartwatches have smaller screen sizes than handheld devices, so it's critical\nto arrange and display elements in a manner that users can access and that\nefficiently uses the available screen space. To help your items fit the screen,\nuse the correct amount of padding and margins as specified by the\n[Material guidelines](https://m3.material.io/foundations/layout/understanding-layout/spacing).\n\nEven when your design fits the screen, elements of your interface may be\ntruncated or clipped when the user does one of the following:\n\n- Changes the display language.\n- Changes the text size.\n- Enables the **Bold text** system setting.\n\nIt's crucial to test your designs with these considerations in mind to ensure\nthey adapt seamlessly to different user environments.\n\nKeep interactive elements fully visible\n---------------------------------------\n\nIf your interface includes interactive elements, check that users can scroll\nthese elements fully into view, especially if these elements are placed at the\nedges of a page. If your app uses the [Horologist](https://github.com/google/horologist) library, use the\n[`responsive()` layout factory](https://github.com/google/horologist/blob/main/docs/compose-layout.md). Otherwise, use spacers and add margins to\nthe top and bottom of a [`ScalingLazyColumn`](/reference/kotlin/androidx/wear/compose/foundation/lazy/package-summary#ScalingLazyColumn%28androidx.compose.ui.Modifier,androidx.wear.compose.foundation.lazy.ScalingLazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.foundation.lazy.ScalingParams,androidx.wear.compose.foundation.lazy.ScalingLazyListAnchorType,androidx.wear.compose.foundation.lazy.AutoCenteringParams,kotlin.Function1%29) object to prevent the first and\nlast list items from always being clipped.\n\nUse chips instead of cards for dense layouts\n--------------------------------------------\n\nIf you need a denser layout, use [`CompactChip`](/reference/kotlin/androidx/wear/compose/material/package-summary#CompactChip(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function1,kotlin.Function1,androidx.wear.compose.material.ChipColors,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ChipBorder)) instead of cards. The larger\nsurface area of cards makes it much more difficult to prevent text truncation\nand content clipping.\n\nConsider screen size effects on truncation and clipping\n-------------------------------------------------------\n\nDepending on the Wear OS device's screen size, you have a smaller or larger\nspace for additional text and buttons to be visible:\n\n### Design for percentage margins, not fixed margins\n\nTo create content that adapts responsively to the Wear OS device's screen size,\napply percentage margins, where the size of each margin is relative to the\nscreen size. In cases where items sit on the top or bottom of the screen, apply\nadditional inner padding to minimize content clipping from the screen's curved\nedge. In contrast, the space at the top and bottom increases when a group of\ncontent is small enough to fit on one screen.\n\ncheck_circle\n\n### Do\n\nComponents must adhere to the percentage margins so that their size scales with the screen's size. This way, the content of your screen always fills the space available and isn't cropped by the screen's edges.\n\ncancel\n\n### Don't\n\nDon't use the maximum space available for text without considering how it may truncate on smaller screens and affect the functionality of your design.\n\n### Use the character limits required by smaller screens\n\nIn most cases, larger screens can show more text and content before truncation.\nEven though more horizontal space might be available, however, always design for\nthe smallest screen size to create a consistent experience across devices.\n\nFor example, a button may have space for more characters on a larger screen\nbefore truncation, but if it's an important call to action that is vital to the\nuser experience, then use text that's short enough to appear entirely, without\ntruncating, on a small device's screen.\n\nAlternatively, if the tile shows variable content, such as text fetched from a\nserver, plan for the possibility that this text is truncated on smaller screens.\n\ncheck_circle\n\n### Do\n\nText which affects the functionality of your design, like call-to-action buttons, is designed with the smallest screen in mind. The additional space on larger screens can show additional lines of text after the breakpoint. The number of lines of text depends on the component and context.\n\ncancel\n\n### Don't\n\nDon't write text that consumes the maximum space available on a larger screen without considering how it may appear truncated on smaller screens and affect the functionality of your design."]]