菜单收缩时文字隐藏需用 white-space: nowrap、text-overflow: ellipsis、overflow: hidden 组合，配合 max-width 与 opacity 渐变过渡；ie11 应降级为 opacity 切换或移除文本节点。
菜单收缩时文字自动隐藏的 CSS 逻辑
纯靠 width 或 overflow: hidden 硬裁剪会切字、断字，还可能遮住图标或留白错位。真正可用的方式是结合 white-space: nowrap + text-overflow: ellipsis + 宽度动态控制，但前提是容器必须是块级且有明确宽度限制。
- 父容器需设
display: flex或display: inline-block，否则text-overflow不生效 - 文字容器必须设
overflow: hidden、text-overflow: ellipsis、white-space: nowrap - 不要对文字元素本身设
width: 0或opacity: 0—— 这会导致布局塌陷或焦点丢失 - 推荐用
max-width配合 CSS transition 控制伸缩，比width更稳定（避免小数像素抖动）
用 CSS 变量驱动菜单状态切换
后台菜单通常有「展开」和「收拢」两种状态，硬写两套 class 容易漏改、难维护。用一个布尔类名（如 .menu-collapsed）配合 CSS 变量更可控。
/* 在 :root 或 .menu-root 上定义 */
.menu-root {
--menu-width: 240px;
--menu-icon-width: 64px;
}
.menu-collapsed .menu-item-label {
max-width: 0;
opacity: 0;
transition: max-width 0.3s ease, opacity 0.2s ease;
}
.menu-collapsed .menu-item-label::before {
content: "";
display: block;
width: 0;
}
.menu-root:not(.menu-collapsed) .menu-item-label {
max-width: 120px;
opacity: 1;
}
注意：仅靠 max-width: 0 不足以让文字完全不可见，必须搭配 opacity: 0 和 overflow: hidden，否则缩放过程中仍可能闪出半个字。
JavaScript 触发收缩时的 DOM 注意点
点击折叠按钮后，如果直接操作 classList.toggle('menu-collapsed')，文字消失会“突兀”。要让渐隐自然，得确保样式已就绪再触发状态变更。
- 别在 JS 里写内联
style.width—— 会覆盖 CSS transition - 如果菜单项用
v-for或ng-repeat渲染，确保每个.menu-item-label都有唯一 key，否则 Vue/Angular 可能复用 DOM 导致过渡失效 - 收拢后若需保持图标可点击，给图标容器加
pointer-events: auto，因为opacity: 0不影响事件捕获 - 测试时留意 Safari 对
max-widthtransition 的兼容性 —— 低版本需降级为transform: scaleX(0)+visibility: hidden
IE11 兼容方案怎么选
IE11 不支持 max-width 的 transition，也不识别 text-overflow: ellipsis 在 flex 子项中的行为。妥协方案不是加 polyfill，而是换思路：
- 收拢态下直接移除文字节点：
el.querySelector('.menu-item-label').textContent = ''，比动画更重要的是功能可用 - 用
transform: translateX(-100%)推走文字，同时设visibility: hidden防止占位 - 放弃渐隐，改用淡入/淡出切换：
opacity+transition是 IE11 唯一可靠路径 - 别试图在 IE11 里做“文字渐隐”，它连
flex: 1都解析不一致，优先保证菜单能点、能展开、不重叠
真正麻烦的不是动画效果，而是不同浏览器对 flex + text-overflow + transition 的组合解析差异——测一遍 Chrome/Firefox/Safari/Edge/IE11 才算真正落地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
