我正在开发一个WordPress网站，并通过将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-includs文件夹中的nav-minu-template.php和nav-minu.php文件构建的。有人能帮助我如何在导航栏PHP中实现一些PHP吗？这样它就会自动将字母间距应用于所有字母减去最后一个字母？
问题是字母间距会在每个字母的末尾添加空白，包括最后一个字母。您可以做的一件事是创建一个具有字母间距属性的span类，然后将span中除最后一个字母外的每个菜单项换行。
<span class="spacing">Home</span>
<span class="spacing">Links</span>
重复问题：应用字母间距时CSS文本下划线过长？
这是letter-spacing的正常行为，为了完成您想要的任务，您需要从最后一个字符中删除letter-spacing，请查看上面问题的正确解决方案以了解更多详细信息。
a {
display: inline-block;
width: 70px /*your a's original width is 72px*/;
overflow: hidden;
}