小编典典

CSS文字在应用字母间距时下划线太长了吗?

css

只要letter-spacing将其应用于带有下划线或底边框的内容,似乎该下划线就会超出右侧的文本。有什么方法可以防止下划线超出文本的最后一个字母?

例如:

<span style="letter-spacing: 1em; border-bottom: 1px solid black;">Test</span>

也许可以使用固定的宽度<div>和边框,但这实际上不是包围每个带下划线的元素的选择。

谢谢!


阅读 279

收藏
2020-05-16

共1个答案

小编典典

问题是“字母间距”通过在每个字母后添加空格来增加空间,但是该空间属于字母,因此最后一个字母有一个额外的下划线,使其看起来像在最后一个字母之外(如果您用鼠标选择div的最后一个字母,您会明白我的意思)。

您可以通过使文本块的最后一个字母不具有“字母间距”属性来解决该问题。例如:

<span style="letter-spacing: 1em; text-decoration: underline;">SPACEEE</span>
<span style="text-decoration: underline;">.</span>

这远非理想,但除非只是一行文本(那里,您可以在右边使用负边距),否则我想不出任何其他解决方案。

2020-05-16