这篇文章上次修改于 3 个月前,可能其部分内容已经发生变化,如有疑问可询问作者。
在很多时候都需要处理文字的溢出,尤其是对单行网格处理时,需要避免文字过长导致容器撑坏的情况。一般会固定文字最大宽度和
overflow: hidden; text-overflow: ellipsis
让溢出的文字显示成 ...
。但是现在可以用 CSS 的 mark 属性,让溢出的文字边缘羽化。如图 Chrome 的 tab。

首先看看
mark-image
的兼容性。
基本上都支持,需要注意的是我使用的 Chrome 85,还在试验性阶段,需要加上前缀
-webkit-
mask-image
和 background-image
的值一样,和蒙版一样,黑色的显示,透明的不显示。我们可以很简单的用 linear-gradient
完成边缘羽化效果。我们来模仿一个 Chrome Tab 的样式。首先建立一个骨架。
确定好外层容器的宽高后,可以对
span
的父元素设置 mask
。最后再加亿点点小细节,大功告成啦。

当然啦,如果遇到不支持的浏览器就显示直接截断的效果,很不好看,我们还想要让他显示
...
,那么可以用 @supports
查询,是否支持这个属性,如果支持才使用,不支持就使用 text-overflow: ellipsis;
。修改一下,
span
的父级样式。
完整的代码请戳:
Gist
https://gist.github.com/Innei/d8dcaebe9ac919c4a1d0462b2f0ef6b8
文章标题:
文章作者:
文章链接: [复制]
最后修改时间:
商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,未经站长允许不得对文章文字内容进行修改演绎。
本文采用创作共用保留署名-非商业-禁止演绎4.0国际许可证
亲亲留个评论再走呗
正在加载评论区...