自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

突發(fā)奇想！借助CSS自定義彩色字體來實(shí)現(xiàn)多行文本展開收起

作者：XboxYan
開發(fā) 前端
原本以為已經(jīng)很完美了，或者說是 CSS 的極限了。但是最近突然冒出一個想法，借助自定義彩色字體也能完美實(shí)現(xiàn)這樣的效果，而且實(shí)現(xiàn)起來更加簡單，適用性和兼容性也更強(qiáng)，一起看看吧

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

圖片

Kapture 2023-03-25 at 13.56.18

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

一、彩色字體

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

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

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

圖片

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

那么，這和本文多行文本展開收起有什么關(guān)系呢？

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

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

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

效果如下

圖片

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

??

??

??

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

圖片

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

圖片

然后將這個 SVG 圖標(biāo)上傳到自己的項目中

圖片

上傳之后就是這樣

圖片

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

圖片

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

圖片

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

圖片

最后，我們將這個字體引入到 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';
}

這樣，剛才的省略號就變成了這個圖標(biāo)

圖片

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

圖片

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

三、點(diǎn)擊展開收起

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

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

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

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

效果如下

圖片

然后通過:checked控制文本行數(shù)

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

這樣就可以展開了

圖片

Kapture 2023-03-25 at 15.28.30

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

圖片

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

:checked~.btn{
    opacity: 1;
}

這樣就簡單實(shí)現(xiàn)了展開收起

圖片

Kapture 2023-03-25 at 15.33.22

四、文本較少時阻止點(diǎn)擊

上面的實(shí)現(xiàn)在文本較多時很完美，在文本較少時會有點(diǎn)問題。

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

圖片

image-20230325154207642

雖然看不見，但可以點(diǎn)擊，點(diǎn)擊以后，收起按鈕就出現(xiàn)了

圖片

Kapture 2023-03-25 at 15.43.00

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

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

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

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

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

圖片

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

圖片

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

圖片

下面是完整代碼，相比之前的實(shí)現(xiàn)要少不少

.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]

五、總結(jié)和說明

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

圖片

這種效果在之前的實(shí)現(xiàn)中是無法做到的，下面總結(jié)一下實(shí)現(xiàn)要點(diǎn)：

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

整體實(shí)現(xiàn)還是非常簡單的，只是一般情況下不容易想到，當(dāng)初 iconfont 宣布支持彩色字體時也沒有想到這種應(yīng)用場景，所以需要一點(diǎn)點(diǎn)想象力。

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

圖片

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

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

然后給這個標(biāo)簽設(shè)置其他字體就行了

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

這樣就正常了~

圖片

參考資料

[1]CSS 實(shí)現(xiàn)多行文本“展開收起”: 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 支持全新的彩色字體圖標(biāo) : 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

責(zé)任編輯：武曉燕 來源： 前端偵探
CSS自定義彩色字體
相關(guān)推薦

2023-12-18 09:15:58

CSS前端容器查詢

2021-07-27 07:31:16

CSS 元素切換

2024-06-20 08:42:45

2017-04-07 11:45:25

CSSDIV前端

2023-07-28 10:21:46

CSS前端

2022-08-02 06:39:06

多行文本CSS

2011-05-12 16:30:44

自定義滾動條

2018-03-27 13:33:48

百度

2023-06-30 10:18:19

ChatGPT算法

2015-04-21 09:14:35

CSSCSS面試題目布局問題整理

2022-12-13 15:00:23

ChatGPTAI

2022-05-18 07:44:13

自定義菜單前端

2009-09-07 22:00:15

LINQ自定義

2022-05-27 07:51:07

自定義無序列表CSS

2011-05-17 10:22:24

項目管理

2019-09-18 08:31:47

數(shù)據(jù)結(jié)構(gòu)設(shè)計

2024-10-07 11:12:55

2009-07-06 16:20:50

JSP自定義標(biāo)簽

2024-01-29 09:33:48

CSS前端SVG

2022-08-22 20:10:59

自定義計數(shù)器CSS
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號