乐趣区

关于前端:突发奇想借助CSS自定义彩色字体来实现多行文本展开收起

jiezi

之前写过这样一篇文章：CSS 实现多行文本“开展收起”，介绍了一些纯 CSS 实现多行文本开展收起的小技巧，特地是右下角的“开展收起”按钮，用到了浮动布局，十分奇妙，有趣味的能够回顾一下。

本来认为曾经很完满了，或者说是 CSS 的极限了。然而最近忽然冒出一个想法，借助自定义黑白字体也能完满实现这样的成果，而且实现起来更加简略，适用性和兼容性也更强，一起看看吧

一、黑白字体

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

在之前一段期间，iconfont 反对了全新的黑白字体图标，让咱们能够更加不便的创立本人的黑白字体。

黑白字体（colors fonts 或 chromatic fonts）是一种字体技术，它容许在每个 字形 中应用多种色彩。它不仅能够用在图标和表情符号（emoji）的设计中，也能够用在一般的文本字体中

有趣味的能够参考这篇文章：iconfont 反对全新的黑白字体图标，这里就不多反复了。简略来说，能够让指定字符渲染成自定义字符，包含黑白图案。

那么，这和本文多行文本开展收起有什么关系呢？

二、通过黑白字体自定义省略号

大家都晓得多行文本，能够设置超出省略号

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;}

这样就能够开展了

因为 label 是暗藏的，所以在开展当前按钮也就不可见的，其实还是在右下角

因而，咱们能够将这个 label 自身设置成 收起 的款式，在开展后显示就能够了，这里采纳的也是黑白字体

:checked~.btn{opacity: 1;}

这样就简略实现了开展收起

四、文本较少时阻止点击

下面的实现在文本较多时很完满，在文本较少时会有点问题。

因为 label 按钮是定位在右下角的，所以无论文本多少，始终都是能够点击的，如下

尽管看不见，但能够点击，点击当前，收起按钮就呈现了

尽管不影响性能，但视觉上还是难以承受，有没有方法阻止这个按钮呢？

这下又须要用一些“障眼法”了，能够用一层足够大容器在文本较少时遮罩右下角的按钮，这里能够用伪元素生成

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

留神，这里相对定位不须要给定偏移量，这样伪元素会追随文本，也就是当文本没有超过指定行数时，伪元素就会齐全笼罩右下角，如下

对于这个相对定位的小技巧能够参考之前这篇文章：你可能不晓得的相对定位

这样在文本较少时就能够笼罩右下角的 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 (runjs.work)
  • CSS color font expand (codepen.io)

五、总结和阐明

以上就通过自定义黑白字体实现了多行文本开展收起的性能，相比之前的实现，除了实现上跟简洁之外，还有个比拟大的劣势在于对于背景没有要求，而不仅仅是纯色，如下

这种成果在之前的实现中是无奈做到的，上面总结一下实现要点：

  1. 时代在变动，技术也在变动，思维也在变动，以前实现的性能可能会有更好的解决方案
  2. 整体思路其实是将默认的省略号自定义成了一个带开展按钮款式的黑白字体
  3. 这样的益处是无需借助布局，而后实现了右下角开展按钮和按钮的自动隐藏
  4. 用一层足够大容器设置相对定位能够在文本较少时遮罩右下角的按钮
  5. 兼容性极佳，反对黑白字体即可，实践上兼容到 IE9+

整体实现还是非常简单的，只是个别状况下不容易想到，当初 iconfont 发表反对黑白字体时也没有想到这种利用场景，所以须要一点点想象力。

对了，还有一些小细节，因为扭转了省略号的字体，所以如果文本中自身蕴含有省略号就会变成这样

当然这个问题也比拟好解决，因为文本中的内容是可控的 ，所以只须要提前用JS 将文本内容解决一下，比方给省略号包裹一层标签

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

而后给这个标签设置其余字体就行了

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

这样就失常了~

最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

退出移动版