下划线使用字母间距延伸到单词末尾之外
我正在开发一个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，使它将自动应用字母间距减去所有字母的最后？
回答 3
Stack Overflow用户
发布于 2013-12-03 16:37:24
问题是，字母间距会在每个字母的末尾添加空格，包括最后一个字母。您可以做的一件事是创建一个具有字母间距属性的span类，然后在span中包装除最后一个字母之外的每个菜单项。
<span class="spacing">Home</span>
<span class="spacing">Links</span>Stack Overflow用户
发布于 2013-12-03 16:35:42
重复问题：CSS Text underlining too long when letter-spacing is applied?
这是letter-spacing的正常行为，为了完成你想要的东西，你需要从最后一个字符中删除letter-spacing，检查上面问题的正确解决方案以了解更多细节。
Stack Overflow用户
发布于 2013-12-03 16:51:51
a {
display: inline-block;
width: 70px /*your a's original width is 72px*/;
overflow: hidden;
} https://stackoverflow.com/questions/20356462
复制
相似问题
删除单词末尾的字母
CSS字母-单词的间距部分
减少VS代码末尾字母之间的间距
HTML画布删除单词开头的字母间距
csharp方法单词的首字母和末尾字母
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
