編輯導(dǎo)語(yǔ)：文本縮略是產(chǎn)品界面常見的顯示形式之一，當(dāng)文本內(nèi)容無(wú)法展示、或者自適應(yīng)調(diào)整寬度有所變化時(shí)，文本則可能進(jìn)行縮略。那么，具體有哪些縮略方式？本篇文章里，作者總結(jié)了文本縮略的具體形式以及設(shè)計(jì)時(shí)的注意要點(diǎn)，一起來(lái)看一下。

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

• 文本內(nèi)容長(zhǎng)度或高度超過列寬或行高；
• 圖表中空間有限，文本內(nèi)容無(wú)法完全顯示；
• 自適應(yīng)調(diào)整時(shí)寬度變小。

一、縮略方式

1. 末端截?cái)?/h3>

• 單行內(nèi)容超過列寬，超出的用‘…’ 省略；
• 多行內(nèi)容超過設(shè)置行數(shù)，超出的部分用‘…’ 省略；
• 標(biāo)簽內(nèi)文案超出由‘…’ 省略。
• 末端截?cái)酁殚L(zhǎng)文本截?cái)嗟耐ㄓ媚Ｊ健?/li>

2. 中間截?cái)?/h3>

• 設(shè)置開頭、末端保留的字符數(shù)，在末端保留字符前顯示‘…’ 。
• 開頭保留字符數(shù)根據(jù)列寬以「顯示盡量多的字符」的原則來(lái)確定（極端情況為開頭不保留字符，即為「開頭截?cái)唷梗蝗艨臻g十分有限，則盡量多地保留末端字符）。
• 中間截?cái)嘣谖谋镜拈_頭相同、末尾字符對(duì)區(qū)別字段起到關(guān)鍵作用時(shí)使用。

場(chǎng)景舉例 1：末尾為數(shù)字

通常用于實(shí)例名（任務(wù)名、文件名、表名、系統(tǒng)）。

典型案例：完整字段如下

company_sales_record_20150116 company_sales_record_20150117

縮略結(jié)果：

場(chǎng)景舉例 2：系列名稱

開頭統(tǒng)一的系列長(zhǎng)名稱，比如部門名稱，或者其他通過后半部分區(qū)分的字段。

典型案例：阿里集團(tuán)的 BU 完整名稱如下：

口碑-本地生活事業(yè)部-北方大區(qū)-北方運(yùn)營(yíng) 口碑-本地生活事業(yè)部-七星大區(qū)-東南運(yùn)營(yíng)

縮略結(jié)果：

二、設(shè)計(jì)要點(diǎn)

重要數(shù)字、時(shí)間不建議縮略。

名稱列縮略可結(jié)合表頭的拖拉控制顯示與縮略，內(nèi)容完全顯示時(shí)‘…’ 消失。

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

描述‘…’ 支持 hover，標(biāo)簽整個(gè)支持 hover。

標(biāo)簽文案過長(zhǎng)時(shí)建議截?cái)?；?biāo)簽數(shù)量多時(shí)建議通過折行全部展示，不建議通過‘…’ 隱藏后面的標(biāo)簽。

tooltip 不承載復(fù)雜文本和操作。

根據(jù)使用場(chǎng)景為字段設(shè)置合理的字?jǐn)?shù)上限和展示空間，避免隱藏過多的內(nèi)容。

tooltip 的尺寸不應(yīng)過大，建議最大尺寸不超過長(zhǎng) 320px、寬 160px。

作者：林葉，螞蟻集團(tuán)設(shè)計(jì)師

本文由 @Ant Design 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于 CC0 協(xié)議