知识共享许可协议

前端文本截断

误区

在设计产品时,由于不少产品经理、工程师并没有「字符不一定等宽」的概念,往往会给出「超过 n 个字符截断显示,英文数字算一个字符,汉字算两个字符」这样的需求。要知道,这里面的问题有很多:

为了显示效果,前端往往会采用优先西文字体族的 font-family 设置,即西文字符用西文字体,汉字用中文字体,这就很容易使得文本的宽度不好根据字符数来控制。首先,非代码的内容本身就不一定适合用等宽西文字体显示。其次即使用了等宽西文字体,汉字也基本不可能正好是其两倍宽。满足这个需求的,只能放弃西文字体,让西文字符也使用中文字体,并且使用中易系列的几个字体了(比如 SimSun,也就是 Windows 下的「宋体」)。(丑不说,还只能满足 Windows 下的需求。)

这种需求甚至在很多时候还会和某些字符编码长度的概念产生混淆,催生「长度限制 n 个字节,其中英文数字算 1 字节、汉字算 2 字节」这样的奇葩说法。

顺便歪个楼,这种「西文等宽、汉字占两倍宽度」的需求正常情况下只会存在于程序员的代码编辑器里。如果你是这种强迫症晚期,又不想用中易宋体,可以考虑试试 Belleve 制作的 Inziu

思路和原理

对于前端来说,数据库存储的限制不应该是我们需要关心的问题。看下前面的「伪需求」,我们实际的需求往往是从视觉角度出发的「超出特定高度截断显示」或「超出特定行数阶段显示」两种。由于实现方式的差异,其实可以分为「单行截断」、「多行截断」、「按高度截断」几种。从成本和效果来看,有「实现难度」、「效果精确度」、「对内容是否有限制」、「是否能响应页面变化」这些需要考虑的细节。本文里不准备列各种实现的代码,仅谈谈一些相关的问题和思路。

要看一些现有的实现方案可以看这几篇:

阅读全部