Flex Label (或 spark.components.Label) 透過 maxDisplayedLines 屬性控制多行顯示與截斷行為,無需複雜邏輯即可實現單行省略、多行截斷等常見 UI 需求。
| 值 | 行為 | 適用場景 |
|---|---|---|
0 (預設) | 無限制多行顯示,不截斷 | 完整內容展示、段落文字 |
1 | 單行顯示,超出寬度以 ... 截斷 | 列表項目、標題、導航欄 |
N > 1 | 最多 N 行,超出以 ... 截斷 | 摘要預覽、卡片描述、固定高度區塊 |
lineBreak 與 truncationIndicator
| 問題 | 原因 | 解決 |
|---|---|---|
設定 maxDisplayedLines=1 但不截斷 | Label 寬度未限制 (無 width、maxWidth 或父容器約束) | 明確設定 width 或放入固寬容器 |
截斷指示器 ... 不顯示 | 文字未實際超出測量寬度 | 確認容器寬度 < 文字測量寬度 |
| 多行模式下行高異常 | 字體大小、行間距 (lineHeight) 設定衝突 | 統一設定 fontSize、lineHeight |
maxDisplayedLines 觸發文字測量與佈局重算,大量 Label (如 List 項目渲染器) 應避免頻繁動態變更。maxDisplayedLines 是 Flex Label 文字截斷的「一鍵開關」。理解 0/1/N 三種模式語意,配合容器寬度約束,即能輕鬆實現從單行省略到多行摘要的各種文字顯示需求。