突發奇想！借助CSS自定義彩色字體來實現多行文本展開收起

作者：XboxYan 2023-03-27 09:25:21

開發前端

原本以為已經很完美了，或者說是 CSS 的極限了。但是最近突然冒出一個想法，借助自定義彩色字體也能完美實現這樣的效果，而且實現起來更加簡單，適用性和兼容性也更強，一起看看吧

之前寫過這樣一篇文章：CSS 實現多行文本“展開收起”[1]，介紹了一些純 CSS 實現多行文本展開收起的小技巧，特別是右下角的“展開收起”按鈕，用到了浮動布局，非常巧妙，有興趣的可以回顧一下。

Kapture 2023-03-25 at 13.56.18

一、彩色字體

說到字體圖標，大家可能會想到一些平臺，比如 iconfont[2]、fontawesome[3] 等。沒錯，我們今天要用到的就是iconfont。

在之前一段時期，iconfont 支持了全新的彩色字體圖標，讓我們可以更加方便的創建自己的彩色字體。

彩色字體（colors fonts 或 chromatic fonts）是一種字體技術，它允許在每個字形中使用多種顏色。它不僅可以用在圖標和表情符號（emoji）的設計中，也可以用在普通的文本字體中

有興趣的可以參考這篇文章：iconfont 支持全新的彩色字體圖標 [4]，這里就不多重復了。簡單來說，可以讓指定字符渲染成自定義字符，包括彩色圖案。

那么，這和本文多行文本展開收起有什么關系呢？

二、通過彩色字體自定義省略號

大家都知道多行文本，可以設置超出省略號

div{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

效果如下

雖然這個省略號是自動生成的，但也是真真正正的省略號，只是頁面上看不到而已。

既然頁面無法找到這個省略號，那是不是可以通過字體改變他的外觀？比如做成展開按鈕？

說干就干，首先在繪圖工具上畫一個帶省略號的展開按鈕，下面是figma

然后將這個 SVG 圖標上傳到自己的項目中

上傳之后就是這樣

接下來，編輯圖標的字符或者Unicode，將這個圖標和省略號一一對應，比如省略號就是…（注意，中文省略號其實是兩個英文省略號組成），或者直接寫它的Unicode值 2026，如下

保存以后來到項目設置，把字體格式的“彩色”這一項給勾上，如果需要本地化可以勾上“Base64”

這樣準備工作就算完成了，可以通過在線鏈接得到在線使用方式，如下

最后，我們將這個字體引入到 CSS 中

@font-face {
  font-family: 'iconfont';  /* Project id 2593077 */
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARQAAwAAAAAB0wAAAQCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIi4jGgZgAEQKh0yGHgE2AiQDFgsSAAQgBYF8ByAbtQXIHpIkUAoFJEQgAQAwBc/3+7Vz76qmTW9DUYm7mDXILNMtecQT3hgqZA/1J9RS+MO/p70snZKJVLdDcRD/VID/838u3iiApx9wIHsjm0jFZdo1RZXR8VEVVRkcMB7dsrrWEasO0IsHAAXCQApSS+cIZilOBBfgBi4yeDog4QdH7ZrGfy0f/p8EMP5CqM6udGoHSQiA4Wi8zKAoioAS1wACGI4ZGbUxBnvwpevhvP8AjjXA+e44ilrDhI19kNyei5Ix5AB4g28UMEaEv/7/JOP/86ePniQsIlOdl+qjiEqfYbfR6cTXyfUKBDdOJaEHhA5TqIPhJVfnUclMC65yhdaYm9FK1lYon6UFqWBqcoaOSlQ6j8skW7uNZm7dhcjz7yAZm7cyASou+HEA1OJevzLDOjeNMRFcEC6fVblxOCOe1lVRCIFQcgFYe8DptYywHBKJEEQN/ARI7EJ99Caw6wh/EEVgpA+Hs2qZYLkhEnnHeFrzoYkILShe9J/i5WeJrsgCnmm8+iaxDYIMzqlfEdF1hiDQNsWW7iRBoCWckkLrKCuMkoyuivLSQ6KrcdscGxp9ACvwa8fvo2hlay9v8zBzV98YglRsQJATw49opT/7FG1qY0IqCASZLhzbQesWia7KXVx47SsY0SOXEuD8Pq9XCIgHE5UAeGsDJgvLzoF9zMT85JqD/Rp7xAxgC8vBgRYmTAXnuN7ewNgfo0/YpwL1Mw4liU2JED8gydkEkmTg1wHvdJFRiVFxiHaJtlSKVbUVzdikcNZjF7pUFvVFKaNOh1wmE7TMaYiss6hlfw+eKHGSTDUKlAjUTudTQ8r4S5iDZwtgnmzy5fLBt4Eg7TiJOKNKyRemNDvBSY3rW+s5m3JNHAocm4Y8wYaex2HJxfG6ttyuWl1yPWQ05H0lsoKyeVsg8g8euxaN28NKxIXpi9HbKRU7f7DS+5XSZ05Q/s99Q5sQBTXOkHBZPdsusZD3Z5s/XKZLDOUWt5zY2UF9d8FZ1tz40jlTjm1Bu4nBgT2K4uS3wVTFodTPn3L0VdN0Z6zRNB+h5AsnAzp3XnInyVKJ36+fKb2wIM8gyqZmcVR9dxJ/TbsMJnJVLgxGH516EufpW4HbP60kk3H9n0qpXOcYyRgLWYtIyUjnbKnEgCipG8/jkvGy4Wtf2tZvCvgxhD5nORuj6ibw0ObHwnk/gjhBeLMTBY7BQ6782LcmvFc/Tjqtjg4MYOYxi0PiXvYg27ilv9zNCDDipARC9N9hM1XBEAXgoAIPcGJwAi5SJB1yY6ghnEBiiSGEn5eEA8GEkkwU/iQgjwxyQUwTG2xRNU5aDh8lrbXsIuPzuBDMfYmEwyDfBl0taoPx6exFFAEA') format('woff2'),
       url('//at.alicdn.com/t/font_2593077_78ql8ytgk.woff?t=1632398100463') format('woff'),
       url('//at.alicdn.com/t/font_2593077_78ql8ytgk.ttf?t=1632398100463') format('truetype');
}
.text{
  font-family: 'iconfont';
}

這樣，剛才的省略號就變成了這個圖標

由于省略號只是換了個字體，所以當默認省略號消失的時候，這個按鈕跟著消失，比如下面是文本較少的時候

這樣就無需借助浮動布局了，并且也能自動隱藏，是不是非常完美？

三、點擊展開收起

雖然上面實現了展開按鈕，但是是假的，還沒有任何點擊行為。接下來需要借助input checkbox來實現展開收起行為，原理和之前一樣，下面是HTML

<div class="wrapper">
    <input id="exp" class="exp" type="checkbox" hidden>
    <div class="text">歡迎關注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧，比如這篇文章，通過iconfont自定義彩色字體來實現多行文本展開收起，一起看看吧</div>
    <label class="btn" for="exp"></label>
</div>

因為視覺上已經有展開按鈕了，所以這里的label只需要定位在右下角就行了，并且設置透明度為0，目的是保留點擊行為

.btn{
    position: absolute;
    right: 10px;
    bottom: 10px;
    opacity: 0; /*設置透明度為0*/
    cursor: pointer;
}

效果如下

然后通過:checked控制文本行數

:checked+.text{
    -webkit-line-clamp: 999;
}

這樣就可以展開了

Kapture 2023-03-25 at 15.28.30

由于label是隱藏的，所以在展開以后按鈕也就不可見的，其實還是在右下角

因此，我們可以將這個label本身設置成收起的樣式，在展開后顯示就可以了，這里采用的也是彩色字體

:checked~.btn{
    opacity: 1;
}

這樣就簡單實現了展開收起

Kapture 2023-03-25 at 15.33.22

四、文本較少時阻止點擊

上面的實現在文本較多時很完美，在文本較少時會有點問題。

由于label按鈕是定位在右下角的，所以無論文本多少，始終都是可以點擊的，如下

image-20230325154207642

雖然看不見，但可以點擊，點擊以后，收起按鈕就出現了

Kapture 2023-03-25 at 15.43.00

雖然不影響功能，但視覺上還是難以接受，有沒有辦法阻止這個按鈕呢？

這下又需要用一些“障眼法”了，可以用一層足夠大容器在文本較少時遮罩右下角的按鈕，這里可以用偽元素生成

.text::after{
    content: '';
    position: absolute;
    width: 100vw;
    height: 100vw;
    z-index: 10;
}

注意，這里絕對定位不需要給定偏移量，這樣偽元素會跟隨文本，也就是當文本沒有超過指定行數時，偽元素就會完全覆蓋右下角，如下

關于這個絕對定位的小技巧可以參考之前這篇文章：你可能不知道的絕對定位[5]

這樣在文本較少時就可以覆蓋右下角的label按鈕，無法點擊

當然，這個背景是不需要的，完全透明的也行，目的只是阻止點擊而已，下面是最終效果

下面是完整代碼，相比之前的實現要少不少

.text {
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: justify;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    font-family: iconfont;
}
.text::after{
    content: '';
    position: absolute;
    width: 100vw;
    height: 100vw;
    z-index: 10;
}
.btn{
    position: absolute;
    right: 10px;
    bottom: 10px;
    opacity: 0;
    cursor: pointer;
    font-family: iconfont;
    line-height: 1.5;
}
.exp:checked+.text{
    -webkit-line-clamp: 999;
}
.exp:checked+.text::after{
    visibility: hidden;
}
.exp:checked~.btn{
    opacity: 1;
}

你也可以訪問以下任意鏈接

CSS color font expand (juejin.cn)[6]
CSS color font expand (runjs.work)[7]
CSS color font expand (codepen.io)[8]

五、總結和說明

以上就通過自定義彩色字體實現了多行文本展開收起的功能，相比之前的實現，除了實現上跟簡潔之外，還有個比較大的優勢在于對于背景沒有要求，而不僅僅是純色，如下

這種效果在之前的實現中是無法做到的，下面總結一下實現要點：

時代在變化，技術也在變化，思維也在變化，以前實現的功能可能會有更好的解決方案
整體思路其實是將默認的省略號自定義成了一個帶展開按鈕樣式的彩色字體
這樣的好處是無需借助布局，然后實現了右下角展開按鈕和按鈕的自動隱藏
用一層足夠大容器設置絕對定位可以在文本較少時遮罩右下角的按鈕
兼容性極佳，支持彩色字體即可，理論上兼容到 IE9+

整體實現還是非常簡單的，只是一般情況下不容易想到，當初 iconfont 宣布支持彩色字體時也沒有想到這種應用場景，所以需要一點點想象力。

對了，還有一些小細節，因為改變了省略號的字體，所以如果文本中本身包含有省略號就會變成這樣

當然這個問題也比較好處理，因為文本中的內容是可控的，所以只需要提前用JS將文本內容處理一下，比如給省略號包裹一層標簽

text.innerHTML = text.textContent.replace(/(…)/g, '<span>$1</span>')

然后給這個標簽設置其他字體就行了

.text span{
  font-family: system-ui;
}

這樣就正常了~

參考資料

[1]CSS 實現多行文本“展開收起”: https://juejin.cn/post/6963904955262435336

[2]iconfont: https://www.iconfont.cn/

[3]fontawesome: https://fontawesome.com/v6/search?o=r&m=free&s=regular%2Csolid

[4]iconfont 支持全新的彩色字體圖標 : https://juejin.cn/post/6969503906112438303

[5]你可能不知道的絕對定位: https://juejin.cn/post/7204633786934607929

[6]CSS color font expand (juejin.cn): https://code.juejin.cn/pen/7214394078740840508

[7]CSS color font expand (runjs.work): https://runjs.work/projects/bda441664b394ec0

[8]CSS color font expand (codepen.io): https://codepen.io/xboxyan/pen/QWVzPvg

責任編輯：武曉燕來源：前端偵探

CSS 自定義彩色字體