侧边Navbar展开/收起时文本换行跳动问题求助

文本换行跳动的核心原因是过渡过程中容器宽度变化触发了文本重排，以下是几种针对性的解决方法：

1. 锁定容器最小宽度，稳定过渡基准 #

给Navbar容器设置收起状态的固定宽度作为最小宽度，确保过渡全程宽度变化是平滑的区间值，避免宽度骤变导致文本换行：

.sidebar-navbar {
  width: 60px; /* 收起状态宽度 */
  min-width: 60px; /* 锁定最小宽度，防止收缩时宽度塌陷 */
  transition: width 0.3s ease;
  overflow: hidden;
}
.sidebar-navbar.expanded {
  width: 220px; /* 展开状态宽度 */
}

2. 强制文本单行，分离文本过渡逻辑 #

让导航文本始终保持单行，通过width和opacity控制显示/隐藏，避免过渡时文本换行：

.nav-item-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 可选：收起时显示省略号 */
  width: 0;
  opacity: 0;
  transition: width 0.3s ease, opacity 0.2s ease;
}
.sidebar-navbar.expanded .nav-item-text {
  width: auto;
  opacity: 1;
}

配合HTML结构：

<div class="sidebar-navbar">
  <div class="nav-item">
    <span class="nav-icon">🚀</span>
    <span class="nav-item-text">项目管理</span>
  </div>
</div>

3. 使用Flex布局稳定导航项结构 #

给导航项设置Flex布局，固定图标宽度，仅让文本区域参与过渡，避免整体布局波动：

.nav-item {
  display: flex;
  align-items: center;
  padding: 10px;
}
.nav-icon {
  display: inline-block;
  width: 40px; /* 固定图标宽度 */
  text-align: center;
}

4. 禁用过渡过程中的文本换行 #

在过渡期间强制容器内文本不换行，过渡结束后恢复：

.sidebar-navbar {
  /* 原有样式 */
  transition: width 0.3s ease;
}
.sidebar-navbar:not(.expanded):not(.expanding) .nav-item-text {
  white-space: nowrap;
}

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