Question

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

#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 Text underlining too long when letter-spacing applied的答案，但是因为导航栏被PHP拉到一起，所以不像修改静态页面的html那么容易，正如答案中提出的那样。

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

Answer 1

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

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

Answer 2

重复的问题：CSS Text underlining too long when letter-spacing is applied?

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

Answer 3

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

下划线以字母间距延伸到单词的结尾

3 个答案: