編輯導語：文本縮略是產品界面常見的顯示形式之一，當文本內容無法展示、或者自適應調整寬度有所變化時，文本則可能進行縮略。那么，具體有哪些縮略方式？本篇文章里，作者總結了文本縮略的具體形式以及設計時的注意要點，一起來看一下。

說明：文本縮略是指展示空間不足時，隱去部分內容并用‘…’ 替代。包括但不限于以下情況：

• 文本內容長度或高度超過列寬或行高；
• 圖表中空間有限，文本內容無法完全顯示；
• 自適應調整時寬度變小。

一、縮略方式

1. 末端截斷

• 單行內容超過列寬，超出的用‘…’ 省略；
• 多行內容超過設置行數，超出的部分用‘…’ 省略；
• 標簽內文案超出由‘…’ 省略。
• 末端截斷為長文本截斷的通用模式。

2. 中間截斷

• 設置開頭、末端保留的字符數，在末端保留字符前顯示‘…’ 。
• 開頭保留字符數根據列寬以「顯示盡量多的字符」的原則來確定（極端情況為開頭不保留字符，即為「開頭截斷」；若空間十分有限，則盡量多地保留末端字符）。
• 中間截斷在文本的開頭相同、末尾字符對區別字段起到關鍵作用時使用。

場景舉例 1：末尾為數字

通常用于實例名（任務名、文件名、表名、系統）。

典型案例：完整字段如下

company_sales_record_20150116 company_sales_record_20150117

縮略結果：

場景舉例 2：系列名稱

開頭統一的系列長名稱，比如部門名稱，或者其他通過后半部分區分的字段。

典型案例：阿里集團的 BU 完整名稱如下：

口碑-本地生活事業部-北方大區-北方運營 口碑-本地生活事業部-七星大區-東南運營

縮略結果：

二、設計要點

重要數字、時間不建議縮略。

名稱列縮略可結合表頭的拖拉控制顯示與縮略，內容完全顯示時‘…’ 消失。

單行文本省略使用 tooltip，多行文本省略使用展開與收起。

描述‘…’ 支持 hover，標簽整個支持 hover。

標簽文案過長時建議截斷；標簽數量多時建議通過折行全部展示，不建議通過‘…’ 隱藏后面的標簽。

tooltip 不承載復雜文本和操作。

根據使用場景為字段設置合理的字數上限和展示空間，避免隱藏過多的內容。

tooltip 的尺寸不應過大，建議最大尺寸不超過長 320px、寬 160px。

作者：林葉，螞蟻集團設計師

本文由 @Ant Design 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash，基于 CC0 協議