使用CSS自定义彩色字体来实现多行文本展开收起

1. 一、彩色字体
2. 二、通过彩色字体自定义省略号
3. 三、点击展开收起
4. 四、文本较少时阻止点击
5. 五、总结和说明

前端开发经常会遇到这样的需求，对于文本内容太多的情况下，利用展开/收起方式实现展示文本效果。但是最近突然冒出一个想法，借助自定义彩色字体也能完美实现这样的效果，而且实现起来更加简单，适用性和兼容性也更强，一起看看吧。

一、彩色字体

说到字体图标，大家可能会想到一些平台，比如 iconfont、fontawesome 等。没错，我们今天要用到的就是iconfont。

在之前一段时期，iconfont 支持了全新的彩色字体图标，让我们可以更加方便的创建自己的彩色字体。

彩色字体（colors fonts 或 chromatic fonts）是一种字体技术，它允许在每个字形中使用多种颜色。它不仅可以用在图标和表情符号（emoji）的设计中，也可以用在普通的文本字体中。