如何解决WordPress导航悬停加粗布局位移与文本换行问题？

我需要实现WordPress导航hover时加粗效果，同时满足两个要求：

1. 悬停加粗时无布局位移
2. 菜单项文本不换行、不重叠其他导航内容

之前尝试flex布局会因加粗后宽度变化导致移位，grid布局虽解决位移但长文本会换行，以下是几种可行方案：

方案一：纯CSS实现（需配合data-text属性） #

核心思路是提前用伪元素渲染加粗文本并隐藏，hover时切换显示状态，避免宽度变化影响布局。

CSS代码 #

.nav {
  list-style: none;
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 1rem; /* 保持菜单项间距 */
}

.nav li span {
  position: relative;
  white-space: nowrap; /* 强制文本单行显示 */
  display: inline-block;
}

/* 提前渲染加粗文本并隐藏 */
.nav li span::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold;
  opacity: 0;
  white-space: nowrap;
}

/* hover时显示加粗文本，隐藏原文本 */
.nav li:hover span::before {
  opacity: 1;
}
.nav li:hover span {
  color: transparent;
}

方案二：JavaScript/jQuery动态计算宽度 #

通过计算每个菜单项加粗后的宽度，设置为元素的最小宽度，确保hover时不会因宽度变化移位。

jQuery代码 #

jQuery(document).ready(function($) {
  $('.nav li').each(function() {
    // 创建临时元素计算加粗状态下的宽度
    const tempElement = $('<span>')
      .text($(this).text())
      .css({
        'font-weight': 'bold',
        'white-space': 'nowrap',
        'visibility': 'hidden',
        'position': 'absolute'
      })
      .appendTo('body');
    
    // 将计算出的宽度设为菜单项最小宽度
    const boldWidth = tempElement.width();
    $(this).css('min-width', `${boldWidth}px`);
    
    tempElement.remove();
  });
  
  // 强制文本不换行
  $('.nav li').css('white-space', 'nowrap');
});

配套CSS #

.nav {
  list-style: none;
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 1rem;
}

.nav li:hover {
  font-weight: bold;
}

方案三：PHP适配wp_nav_menu添加data-text属性 #

针对WordPress的wp_nav_menu()生成的导航，通过过滤器给菜单项添加data-text属性，配合方案一的纯CSS实现效果。

PHP代码（添加到主题functions.php） #

add_filter('nav_menu_item_args', 'add_data_attribute_to_menu', 10, 3);
function add_data_attribute_to_menu($args, $item, $depth) {
  // 给菜单项的包裹span添加data-text属性，值为菜单项标题
  $args['link_before'] = '<span data-text="' . esc_attr($item->title) . '">';
  $args['link_after'] = '</span>';
  return $args;
}

添加后直接使用方案一的CSS即可生效。

内容的提问来源于stack exchange，提问作者JDawwgy