在很多时候都需要处理文字的溢出，尤其是对单行网格处理时，需要避免文字过长导致容器撑坏的情况。一般会固定文字最大宽度和 overflow: hidden; text-overflow: ellipsis 让溢出的文字显示成 ...。但是现在可以用 CSS 的 mark 属性，让溢出的文字边缘羽化。
如图 Chrome 的 tab。
¡边缘羽化
首先看看 mark-image 的兼容性。
基本上都支持，需要注意的是我使用的 Chrome 85，还在试验性阶段，需要加上前缀 -webkit-
mask-image 和 background-image 的值一样，和蒙版一样，黑色的显示，透明的不显示。我们可以很简单的用 linear-gradient 完成边缘羽化效果。
我们来模仿一个 Chrome Tab 的样式。首先建立一个骨架。
1<div class="tab-wrap">
2  <div class="tab">
3    <span class="tab-text cursor"
4      >一个标题很长的标签 一个标题很长的标签 一个标题很长的标签
5      一个标题很长的标签</span
6    >
7  </div>
8  <div class="close cursor">×</div>
9</div>
Copy
确定好外层容器的宽高后，可以对 span 的父元素设置 mask。
1.tab-wrap .tab {
2  width: 100%;
3  overflow: hidden;
4  -webkit-mask-image: linear-gradient(
5    to right,
6    rgba(0, 0, 0, 1) calc(100% - 2em),
7    transparent
8  );
9  mask-image: linear-gradient(
10    to right,
11    rgba(0, 0, 0, 1) calc(100% - 2em),
12    transparent
13  );
14}
15.tab .tab-text {
16  white-space: nowrap;
17}
Copy
最后再加亿点点小细节，大功告成啦。
当然啦，如果遇到不支持的浏览器就显示直接截断的效果，很不好看，我们还想要让他显示 ...，那么可以用 @supports 查询，是否支持这个属性，如果支持才使用，不支持就使用 text-overflow: ellipsis;。
修改一下，span 的父级样式。
1.tab-wrap .tab {
2  width: 100%;
3  overflow: hidden;
4  text-overflow: ellipsis;
5}
6@supports (-webkit-mask-image: inherit) or (mask-image: inherit) {
7  .tab-wrap .tab {
8    text-overflow: clip;
9    -webkit-mask-image: linear-gradient(
10      to right,
11      rgba(0, 0, 0, 1) calc(100% - 2em),
12      transparent
13    );
14    mask-image: linear-gradient(
15      to right,
16      rgba(0, 0, 0, 1) calc(100% - 2em),
17      transparent
18    );
19  }
20}
Copy
¡如果不支持 mask
完整的代码请戳:
Gist
https://gist.github.com/Innei/d8dcaebe9ac919c4a1d0462b2f0ef6b8

文章标题:

文章链接: [复制]

最后修改时间:

商业转载请联系站长获得授权，非商业转载请注明本文出处及文章链接，未经站长允许不得对文章文字内容进行修改演绎。
本文采用创作共用保留署名-非商业-禁止演绎4.0国际许可证

亲亲留个评论再走呗

0
0
0
0
正在加载评论区...