只要letter-spacing将其应用于带有下划线或底边框的内容,似乎该下划线就会超出右侧的文本。有什么方法可以防止下划线超出文本的最后一个字母?
letter-spacing
例如:
<span style="letter-spacing: 1em; border-bottom: 1px solid black;">Test</span>
也许可以使用固定的宽度<div>和边框,但这实际上不是包围每个带下划线的元素的选择。
<div>
谢谢!
问题是“字母间距”通过在每个字母后添加空格来增加空间,但是该空间属于字母,因此最后一个字母有一个额外的下划线,使其看起来像在最后一个字母之外(如果您用鼠标选择div的最后一个字母,您会明白我的意思)。
您可以通过使文本块的最后一个字母不具有“字母间距”属性来解决该问题。例如:
<span style="letter-spacing: 1em; text-decoration: underline;">SPACEEE</span> <span style="text-decoration: underline;">.</span>
这远非理想,但除非只是一行文本(那里,您可以在右边使用负边距),否则我想不出任何其他解决方案。