研究 label 欄位: Line Breaks & Autoshrink

當你需要在app裡面使用文字呈現時,就必須使用到label。這篇以其中的Line breaks和autoshrink欄位來研究。

Line break:

以下分別解釋其定義:

Clip:若有過長的文字敘述,後方的文字將裁切
Character Wrap:若是英文且多行,則每行以「字母」斷行
Word Wrap:若是英文且多行,則每行以「單字」斷行
Truncate Head:過長的文字敘述,前方的文字以 「…」 代替
Truncate Middle:過長的文字敘述,中間的文字以 「…」 代替
Truncate Tail:過長的文字敘述,後方的文字以 「…」 代替

實際呈現如下圖:

Autoshrink:

當字串長度超過Label的長度時,能用來控制文字縮小的效果。

Fixed Font Size(default):不縮放。
Minimum Font Scale:當字串太長時,系統會依設定的最小縮放倍數縮小文字,以顯示所有字串。
Minium Font Size:當字串太長時,系統會依設定的字型大小縮小文字,以顯示所有字串。

--

--

Rachel Jian
彼得潘的 Swift iOS / Flutter App 開發教室

Localization PM @ ASUS. L10n is an essential step towards good UX for good apps.