下划线扩展到单词尾部，并带有字母间距[关闭]

Question

我正在开发一个WordPress网站，并通过添加letter-spacing: 4px;来增加网站导航栏上的letter-spacing: 4px; 到位于主题style.css文件中的#mainNav ID网站。 我还添加了text-decoration: underline; 放在以下类别下的相同style.css文件中，以便当前查看的页面在导航栏中带有下划线：

#mainNav ul li.current a,
#mainNav ul li.current-cat a,
#mainNav ul li.current_page_item a,
#mainNav ul li.current-menu-item a,
#mainNav ul li.current-post-ancestor a,
.single-post #mainNav ul li.current_page_parent a,
#mainNav ul li.current-category-parent a,
#mainNav ul li.current-category-ancestor a,
#mainNav ul li.current-portfolio-ancestor a,
#mainNav ul li.current-projects-ancestor a {
    color: #2e2e2e;
    text-decoration: underline;
}

问题在于，由于增加了字母间距，因此下划线超出了单词的末尾。

当应用字母间距时 ，我已经看到CSS文本的答案下划线时间过长 ，但是由于导航栏被PHP拉到一起，所以它不像修改答案中所建议的为静态页面修改html那样容易。

WordPress中的导航栏是通过wp-includes文件夹中的nav-menu-template.php和nav-menu.php文件构建的。 有人可以为我提供一些帮助，以帮助我如何将一些PHP实现到导航栏PHP中，以便它将字母间距自动应用于所有字母减去最后一个字母吗？

Answer 1

问题在于字母间距在每个字母（包括最后一个字母）的末尾添加了空格。 您可以做的一件事是创建一个具有letter-spacing属性的span类，然后将每个菜单项包装在span中，除了最后一个字母。

<span class="spacing">Home</span>
<span class="spacing">Links</span>

Answer 2

重复的问题： 当应用字母间距时，CSS文本下划线太长了吗？

这是letter-spacing的正常行为，要完成所需的操作，您需要从最后一个字符中删除letter-spacing ，请检查上述问题的正确解决方案以获取更多详细信息。

Answer 3

a {
  display: inline-block;
  width: 70px /*your a's original width is 72px*/;
  overflow: hidden;
}