评论

【奇技淫巧】完全控制文本的下划线的距离和宽度

通过CSS属性的 text-decoration 可以为文本内容添加下划线样式类型 颜色 但是不能控制其下划线和文本的间隔距离 以及 宽度 下面介绍一种方法控制文本的下划线 包括位置 宽度 旋转等

需求:

今天开发遇到一个需求 想给文字添加下划线

不懂字体基线的 可以百度下,需求如下图:

分析过程

前提:在这个需求之前我已经先将短文单词拆解 每一个单词独立为一个元素

因为内容是英文 需要帖子字母的基线添加下划线

如果使用 text-decoration:underline  solid #ffe60f; 只能给文本内容加上一个1px的实线下划线 如下图:

探索方法:

结果产品不满意 那咱先继续改 于是想到了两种方法:

1.使用 border 属性 border的话 是可以设置宽度的 但是border不是针对文本的 而是针对整个元素的

上网查询 有人介绍使用 border padding 来控制border的距离 但是他的例子是将border向下移动 我的需求是向上移动 贴住文本的基线 那怎么对padding使用 负值呢?

结果。。尝试失败 padding的负值 不能缩小元素的大小 从而改变border的位置和 margin完全不同 margin的负值可以做到

方法1结论:使用border只能将下划线向下移动

2.使用 css伪类 before 和 after + border + 绝对定位的方法 实现下划线

我的思路是 文本本身使用相对定位 将伪类的高度设置为1em 宽度100% 这样就和文本的宽高相同 使用绝对定位 设置 left:0 然后给伪类一个 border-bottom:4rpx solid #ffe60f

代码如下:

结果如下图:

嗯 还不错 但是美中不足的是 这个下划线将原文文本遮挡了 尝试使用z-index控制层级 强制将伪类下划线挪到下面 代码如下:

嗯 果然不好使。。。结果视图没变 开发工具和真机测试一样 都没变化 看来这个伪类的层级控制是失效的

不过庆幸的是 这个效果 在产品经理那边通过了 他还说了一句 果然慢工出细活!。。

我顿感无语

顺便提下 那个 height:1.1em;是将下划线又向下移动了0.1em的距离 因为 设置 1em 还会遮挡文本内容的最下面


方法2结论:使用伪类+绝对定位的方法 能随意控制下划线的位置 不仅可以上下 还可以左右移动 甚至可以添加旋转效果 美中不足的是 小程序里会遮挡文本内容

注意:在小程序里 就算使用 text-decoration 属性也会出现在 g p f y 这样的字母下方下划线断档的情况 如下图


以上就是关于 如何 控制 文本下划线的分享和摸索过程 !希望能帮到你 不足之处 欢迎指正

最后一次编辑于  2020-09-03  
点赞 3
收藏
评论

1 个评论

  • 张有釜
    张有釜
    2020-09-03

    顺便提个需求 通过 z-index 控制定位元素的after和before伪类层级

    2020-09-03
    赞同
    回复
登录 后发表内容