2021-8-15 資深UI設計者
說明：文本縮略是指展示空間不足時，隱去部分內容并用'...' 替代。常見情況：
· 文本內容長度或高度超過列寬或行高；
· 圖表中空間有限，文本內容無法完全顯示；
· 自適應調整時寬度變小。
· 內容超過列寬時超出的用 '...' 省略；
· 標簽內文案超出由 '...' 省略。
· 長文本截斷的通用模式。
· 設置開頭、末端保留的字符數，在末端保留字符前顯示 '...' ；
· 開頭保留字符數根據列寬以「顯示盡量多的字符」的原則來確定（極端情況為開頭不保留字符，即為「開頭截斷」；若空間十分有限，則盡量多地保留末端字符）。
· 中間截斷在文本的開頭相同、末尾字符對區別字段起到關鍵作用時使用。
包括任務名、文件名、表名、系統名等等。
典型案例：完整字段如下
company_sales_record_20150116
company_sales_record_20150117
縮略結果：
開頭統一的系列長名稱，通過后半部分來區分的字段。
典型案例：阿里集團的 BU 完整名稱如下
口碑-本地生活事業部-北方大區-北方運營
口碑-本地生活事業部-七星大區-東南運營
縮略結果：
· 重要數字、時間不建議縮略。
· 名稱列縮略可結合表頭的拖拉控制顯示與縮略，內容完全顯示時 '...' 消失。
· 單行文本省略使用 tooltip，多行文本省略使用展開與收起。
· 描述 '...' 支持 hover，標簽整個支持 hover。
· 標簽數量多時建議通過折行全部展示，不建議通過 '...' 隱藏后面的標簽。
· tooltip 不承載復雜文本和操作。
· 根據使用場景為字段設置合理的字數上限和展示空間，避免隱藏過多的內容。
· tooltip 的尺寸不應過大，建議最大尺寸不超過長 320px、寬 160px。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.paul-jarrel.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務