求助：Tailwind侧边栏宽度动画导致内部内容换行问题

问题场景 #

使用Vue+Tailwind开发Web应用，首次接触Tailwind，侧边栏通过宽度切换动画实现展开/收起，但切换过程中菜单项文本会随父容器宽度变化而换行，需要实现菜单项文本始终单行的平滑切换效果。

解决思路 #

通过强制文本单行显示、优化过渡属性、同步动画时长三个核心调整，解决换行问题并保证动画流畅：

• 强制菜单项文本不换行
• 配合溢出隐藏与宽度过渡，避免文本溢出时的异常显示
• 统一侧边栏与文本的过渡时长，让动画同步协调

修改后的代码 #

HTML代码 #

<div id="app" class="bg-gray-100 text-black h-screen">
  <div class="flex gap-x-8 justify-center max-w-screen-xl mx-auto p-4">
    <aside :class="{ 'w-72': isExpanded, 'w-24': !isExpanded }"
    class="bg-white h-screen p-4 pt-8 relative duration-300 rounded-xl flex flex-col transition-width">
      <button @click="toggleSidebar" class="cursor-pointer absolute -right-5 top-7 transform-gpu transition duration-200" >{{isExpanded ? 'close' : 'open'}}</button>
      
      <!-- Menu items -->
      <div class="pt-12">
        <ul>
          <li v-for="item of menuItems" class="flex items-center px-3 py-3 gap-x-4 rounded-md hover:bg-blue-500 hover:text-white cursor-pointer">
             <i class="fa fa-plus-circle"></i>
            <span
            :class="{ 'opacity-0 w-0': !isExpanded }"
            class="origin-left duration-300 w-auto transition-all whitespace-nowrap overflow-hidden"
            >{{ item.label }}</span>
          </li>
        </ul>
      </div>
    </aside>
    <main class="p-8 rounded-xl grow bg-white">
      <h2 class="text-xl font-bold mb-2">Hi {{person}}</h2>
       <article class="w-40 h-40 rounded bg-gray-700"></article>
    </main>
  </div>
</div>

Vue代码 #

const { createApp } = Vue;

createApp({
  data() {
    return {
      person: "Codepen User!",
      isExpanded: true,
      menuItems: [{icon: '', label: "Dashboard"}, {icon: '', label: "A long menu item"}, {icon: '', label: "Settings"}]
    };
  },
  methods: {
    toggleSidebar(event) {
      this.isExpanded = !this.isExpanded;
    },
  }
}).mount("#app");

关键修改点说明 #

• 给文本span添加whitespace-nowrap：强制文本始终单行显示，从根源解决切换时的换行问题
• 把span的transition-width改为transition-all：让宽度与透明度的过渡效果同步触发，动画更流畅自然
• 将span的duration-200改为duration-300：与侧边栏的过渡时长保持一致，避免动画脱节
• 添加overflow-hidden：在宽度收缩时自动隐藏溢出的文本，防止文本超出容器范围

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